Proč jsou selektory v CSS nadměrně děděny?

Selektory v CSS se dědí. Dědičnost v CSS se týká předávání některých vlastností prvku jeho potomkům. Selektory jsou vzory, které vybírají prvky pro použití stylů.

Dědičnost může znamenat, že styly aplikované pomocí jednoho selektoru mohou být přepsány (zděděny) styly aplikovanými pomocí jiného selektoru. To nesouvisí s dědičností, ale s mechanismem kaskádování CSS, který určuje, které styly se na prvek aplikují, když více pravidel CSS nastaví hodnotu pro stejnou vlastnost.

Faktory ovlivňující kaskádování a "přepis" stylů:

1. Specifičnost (Specificity): Selektory s vyšší specifitou mají větší váhu.
2. Pořadí (Order): Při stejné specifitě se použije pravidlo deklarované jako poslední.
3. Důležitost (!important): Deklarace označené !important mají nejvyšší prioritu (kromě vestavěných stylů User Agent s !important).
4. Původ stylů (Origin): Styly pocházejí z různých zdrojů (prohlížeč, uživatel, autor).

Příklad specifity:

/* Nízká specifita */
p {
  color: blue;
}

/* Vysoká specifita - přepíše barvu */
.text-section p {
  color: red;
}