Pierwsza strona w CSS BEM - ile do poprawy?

Question

Witam. Zwracam się z gorącą prośbą oceny strony którą napisałem na dniach z darmowego psd'ka.

Jest to moja druga stronka, pierwszą wykonałem 'tradycyjnym' sposobem ale zmartwiła mnie ilość zagnieżdżonych selektorów ( dochodziło nawet do 5 ) więc tym razem spróbowałem spróbować swoich sił z BEM'em.

Strona jest surowa, brak JS'a, animacji, jest podstawowa responsywność lecz brak menu dla mobilek oraz niestety brak modułów css'a, wszystko jest zawarte w 1 pliku jednak zabiorę się za to gdy tylko doprowadzę kod do porządku. Na ten moment zależy mi najbardziej na wyrobieniu dobrych nawyków w pisaniu kodu w BEM, dlatego postanowiłem udostępnić kod do oceny.

https://github.com/kamilSterczik/dronezone

Z góry dziękuję za analizę oraz wskazanie błędów, pozdrawiam :)

Answer 1

Ilość zagnieżdżonych selektorów tak naprawdę nie ma znaczenia o ile ogarniasz swój kod. Jeśli nad projektem siedzi kilku developerów to wtedy ich mniejsza ilość ma sens. 

Szczerze jak na to patrze... przerost formy nad treścią ale nie o to chodzi. Ogólnie jest dobrze. Na początku zmieniłbym tylko 

@mixin bp($point) {
@if $point == XXL {
@media (min-width: 1600px) { @content; }
}
@else if $point == XL {
@media (max-width: 1300px) { @content; }
}
@else if $point == L {
@media (max-width: 1000px) { @content; }
}
@else if $point == M {
@media (max-width: 850px) { @content; }
}
@else if $point == S {
@media (max-width: 710px) { @content; }
}
@else if $point == XS {
@media (max-width: 650px) { @content; }
}
@else if $point == XXS {
@media (max-width: 400px) { @content; }
}
}

Rób stronę mobile first, idąc od najmniejszego ekranu do największego

@media (min-width: 400px) i tak w górę.

Comments

Jeśli nad projektem siedzi kilku developerów to wtedy ich mniejsza ilość ma sens. 

Nawet jeżeli sami siedzimy nad projektem sami to też ma sens.

---

jak dla mnie to tylko więcej przewijania, jedno tu, drugie tam, trzecie siam, ale jak kto woli, to ma być przyjemne przy edycji i proste dla tego kto to robi :)

---

<div class="drones-item__photo">
    <img src="assets/img/icon-drone.png" alt="">
</div>

zbędny div.

---

Dzięki za wskazówki ;)