Kaskada CSS rządzi tym, która reguła wygrywa, a dziedziczenie decyduje, które właściwości w ogóle przechodzą z rodzica na dziecko. To dwa różne mechanizmy i mieszanie ich prowadzi do frustracji. Kolor tekstu ustawiony na kontenerze trafi do akapitu w środku, bo color jest właściwością dziedziczoną. Obramowanie już nie — ramka należy do konkretnego pudełka i nie przenosi się na elementy potomne. Dlatego nagłówek w sekcji z paddingiem odziedziczy kolor, ale nie odziedziczy tła ani borderu.

Warto zrozumieć, skąd bierze się ta różnica. Właściwości dziedziczone to głównie te związane z typografią: font, line-height, color, text-align, visibility. Reszta — margin, padding, border, background, width, display — dotyczy samego elementu i jego pozycji w układzie. Gdyby marginesy dziedziczyły się automatycznie, każdy akapit w kontenerze dostałby podwójny odstęp, a to szybko rozsypałoby layout. Jeśli chcesz prześledzić, jak działa dziedziczenie właściwości w praktyce, sprawdź, które reguły faktycznie schodzą w dół drzewa DOM.

Konflikt stylów pojawia się, gdy jedna właściwość jest ustawiona w kilku miejscach. Kaskada rozstrzyga to według specyficzności, kolejności i wagi. Selektor klasy wygrywa z selektorem elementu, a styl inline bije oba. Do tego dochodzi !important, które potrafi wywrócić całą hierarchię. Gdy element nie wygląda tak, jak powinien, problemem rzadko jest brak dziedziczenia — częściej nadpisana reguła. Warto wtedy sprawdzić w devtoolsach, która deklaracja faktycznie została zastosowana i jaka ją przebiła.

Praktyczna zasada jest prosta: dziedzicz to, co ma sens globalnie, a resztę ustawiaj świadomie na konkretnym elemencie. Kolor i font na poziomie body to dobry pomysł. Obramowania, marginesy i tła — już nie. Świadome korzystanie z inherit, initial i unset pozwala kontrolować przepływ wartości bez walki z domyślnymi zachowaniami przeglądarki.