Dziedziczenie stylów w CSS: jak działa, czego nie dziedziczą klasy i jak nadpisywać style efektywnie?

Czy zdarzyło Ci się, że mimo ustawienia konkretnego koloru czy rozmiaru fontu w CSS, elementy na stronie nadal wyglądały inaczej, niż się spodziewałeś? Możliwe, że winny był mechanizm dziedziczenia stylów, który z jednej strony bardzo ułatwia projektowanie layoutu, z drugiej – potrafi wprowadzić nieco chaosu. W tym artykule przyglądamy się, jak działa dziedziczenie w CSS, które właściwości faktycznie są dziedziczone, a także jak nadpisywać style.

Na czym polega dziedziczenie stylów w CSS?

W CSS style mogą być dziedziczone przez elementy podrzędne (czyli zagnieżdżone w innych). Jeśli, na przykład, ustawisz dla body kolor tekstu jako szary (color: #666;), wszystkie paragrafy (<p>) czy nagłówki (<h1>, <h2>, itd.) odziedziczą ten styl – chyba że nadpiszesz go lokalnie.

To właśnie jest dziedziczenie: przekazywanie wartości stylów z elementów nadrzędnych do potomnych. Dotyczy to jednak tylko wybranych właściwości.

Które style są dziedziczone, a które nie?

Dziedziczone są głównie właściwości dotyczące tekstu i jego otoczenia, np.:

• color;
• font-family;
• font-size;
• letter-spacing;
• line-height;
• text-align;
• visibility;
• white-space.

Z drugiej strony, właściwości dotyczące układu, wyglądu tła, ramek i rozmiarów nie są dziedziczone automatycznie. Przykłady:

• margin, padding;
• border;
• width, height;
• display;
• background, background-color.

To oznacza, że jeśli chcesz, aby wszystkie elementy miały np. to samo tło, musisz je ustawić jawnie – dziedziczenie tego nie rozwiąże.

A co z klasami? Czy style klas się dziedziczą?

Klasy jako takie też nie są dziedziczone. 

Jeśli element nadrzędny ma przypisaną klasę highlight, to jego “dzieci” nie odziedziczą tej klasy – i nie przejmą stylów, które są do niej przypisane. Jedyny sposób, aby styl z klasy przeszedł na potomne elementy, to takie ustawienie selektora, aby obejmował również dzieci. 

Przykład:

highlight {

  color: red;

}

Tutaj color: red zadziała na sam element z klasą highlight. Jeśli chcesz, by jego potomne elementy też były czerwone, musisz dodać gwiazdkę:

highlight * {

  color: red;

}

Jak w prosty sposób nadpisywać style?

Jeśli style z elementu nadrzędnego nie pasują do któregoś z elementów potomnych, możesz je zmienić na kilka sposobów.

Pierwsza, oczywista opcja – ustaw styl lokalnie dla wybranego elementu. Proste p { color: blue; } nadpisze dziedziczony kolor, bo z zasady działania arkuszy kaskadowych – element stylowany jest wg tej reguły, która w arkuszu pojawi się później.

Drugie wyjście: użyj selektora o wyższej wartości. CSS opiera się na zasadzie specificity i w przypadku konfliktu stylów stosuje reguły tego selektora, który jest bardziej szczegółowy (precyzyjnie wskazuje miejsce, które chcemy ostylować). Tak więc w przykładzie:

h1 {

  font-size: 36px;

}

h1.title {

  font-size: 42px;

}

nagłówek ostatecznie będzie miał font wielkości 42px – bo h1.title jest bardziej szczegółowy (zawiera i tag, i klasę stylowanego elementu). Dlatego też lepiej unikać stosowania zbyt wielu ogólnych selektorów – np. div, p, a – bez kontekstu; będą one bardzo łatwo nadpisywane.

Możesz też korzystać z keywordów inherit, initial oraz unset… ale świadomie (czyli tak samo, jak ze słów kluczowych w SEO). Czasem bowiem nie trzeba nic nadpisywać – wystarczy, że wymusisz dziedziczenie:

• inherit – wymusza dziedziczenie stylu z elementu nadrzędnego (np. color: inherit;)
• initial – przywraca wartość domyślną właściwości, jaką przewiduje specyfikacja CSS (np. display: initial;)
• unset – działa jak inherit dla dziedziczonych właściwości i jak initial dla pozostałych.

I pamiętaj, że deklaracja !important zawsze powinna być ostatecznością. Tak, oznaczona nią reguła będzie miała najwyższy priorytet i pierwszeństwo nad innymi selektorami – ale gdy takich reguł pojawi się kilka, pojawi się też chaos. Takie siłowe nadpisywanie styli ma sens, jeśli np. musisz wymusić regułę np. w treści osadzonej z zewnętrznego źródła, ale w innych sytuacjach lepiej tego unikać.