Pytanie o reguły w CSS

pytanie zadane 15 lutego 2018 w HTML i CSS przez michh123 Bywalec (2,790 p.)

Witam,

Oglądałem niedawno film Pana Damiana Wielgosika z kanału koduje

link

I mam pytanie dlaczego Pan Damian stosuje takie długie nagłówki reguł? Czy jest to jedna z dobrych praktyk CSS? Przykładowo:

<nav class="page-nav">
                <ul class="navigation-menu">
                    <li><a href="#" title="Features of my product">Features</a></li>
                    <li><a href="#" title="Check the pricing">Pricing</a></li>
                    <li><a href="#" title="A few words about me">About</a></li>
                    <li class="sign-up"><a href="#" title="Sign up if you don't have an account">Sign up</a></li>
                </ul>
                <button type="button" title="Open menu" class="hamburger">
                ........

I kod CSS:

.page-header.nav-opened .page-nav .hamburger {
    fill: #000000;
}

Dlaczego nie lepiej zapisać do tej reguły samej klasy hamburger albo w kodzie HTML usunąć z buttona tę klasę i w CSS zapisać:

.page-nav button {
    fill: #000000; 
}

? I to nie jest jednorazowy przykład, Pan Damian cały czas stosuje takie nagłówki reguł.
Pan Damian jest wytrawnym specjalistą więc na pewno nie jest to błąd, a wręcz przeciwnie, napewno to czemuś służy. Więc moje pytanie brzmi: czemu służy taki zabieg i czy jest to jedna z dobrych praktyk, jeśli tak bardzo bym prosił o link do stosownego artykułu na ten temat

Z góry serdecznie dziękuję za odpowiedzi,
Pozdrawiam!

4 odpowiedzi

odpowiedź 16 lutego 2018 przez Artek Stary wyjadacz (11,800 p.)
wybrane 16 lutego 2018 przez michh123

Najlepsza

To złe podejście ze względu chociażby na tzw. tight coupling pomiędzy html i css. Nieznaczna zmiana w HTML może spowodować, że style przestaną działać. Dąż do uzyskania tzw. "płaskiej specyficzności" - styluj po pojedynczych klasach.

komentarz 16 lutego 2018 przez michh123 Bywalec (2,790 p.)

Dziękuję bardzo za wyjaśnienie tematu! :)

komentarz 17 lutego 2018 przez Artek Stary wyjadacz (11,800 p.)

Polecam się na przyszłość :p

odpowiedź 16 lutego 2018 przez Comandeer Guru (601,110 p.)

To nie jest dobra praktyka, wręcz odwrotnie. Dobra praktyka mówi: płaska hierarchia klas i płaska specyficzność. Selektor .page-header.nav-opened .page-nav .hamburger powinien zostać zredukowany do .nav-opened .hamburger, bo tak naprawdę reszta informacji nie jest całkowicie potrzebna.

komentarz 16 lutego 2018 przez michh123 Bywalec (2,790 p.)

Super! Dziękuję za wyjaśnienie i linki! Chętnie poczytam :)

odpowiedź 16 lutego 2018 przez Wiciorny Ekspert (270,110 p.)

bo tutaj stylizujesz hamburgera tylko jeśli wystepuje on w kolejności po .page-header/cos tam /costam ....

jesli mialbys inny obiekt hamburger który nie występuje ' kaskadowo' tak jak w tej stylizacji, on nie będzie tak wystylizowany, mimo że należy do klasy- to część wartości odziedziczy po innych elementach. Dodatkowo to jest klasa/ nie id. Więc tych elementów może być mnóstwo, na wielu podstronach i stronach ... i mogą to być różne elementy.

komentarz 16 lutego 2018 przez Comandeer Guru (601,110 p.)

bo tutaj stylizujesz hamburgera tylko jeśli wystepuje on w kolejności po .page-header/cos tam /costam ....

To jest tight-coupling CSS-a z HTML-em, uzależnianie prezentacji jednego elementu od całej struktury HTML, co jest antywzorcem.

Dodatkowo to jest klasa/ nie id. Więc tych elementów może być mnóstwo

[id] i tak nie powinno służyć do stylowania.

komentarz 16 lutego 2018 przez michh123 Bywalec (2,790 p.)

Dziękuję za wyjaśnienie!

odpowiedź 16 lutego 2018 przez arces Pasjonat (17,700 p.)

Błędem to nie jest, ale teraz większość podąża za trendem BEM i takich sytuacji się unika, żeby reguły CSS był tak długie. Dzięki BEM masz pojedyncze reguły, ale ich nazwy często bywają długie, jednak jest to o wiele lepsze wyjście, tym bardziej, jeżeli się w pełni wykorzysta i "wprowadzi w życie" BEM.

Co do drugiej sytuacji i stylowania po buttonie, to tego powinno się już tym bardziej unikać. Film który oglądałeś jest dla początkujących i tylko dlatego są tam tak przedstawione reguły CSS. Poczytaj/pooglądaj bardziej zaawansowane rzeczy dotyczące CSS i zobaczysz, że większość specjalistów unika takich zabiegów.

komentarz 16 lutego 2018 przez michh123 Bywalec (2,790 p.)

Dziękuję za wyjaśnienie i nawiązanie do BEM! Poczytam o tym więcej i wprowadzę BEM w życie, zaczynając od refaktoryzacji tego kodu właśnie pod BEM :)

Pozdrawiam!