Sobes.tech
Junior

Co jsou vestavěné styly a jaké je jejich pořadí priority?

sobes.tech AI

Odpověď od AI

Vložené styly jsou styly, které jsou přímo definovány v HTML prvku pomocí atributu style.

<p style="color: red;"> Tento text bude červený </p>

Priorita vložených stylů je nejvyšší ze všech způsobů definice stylů v CSS. Přepisují styly z externích stylových tabulek (.css), styly z bloků <style> v <head> a děděné styly od rodičovských prvků. Výjimkou jsou pravidla s příznakem !important.

Příklad priorit (od nejvyšší po nejnižší, při stejné specifitě):

  1. Pravidla s !important (nedoporučuje se používat).
  2. Vložené styly (style atribut).
  3. Externí stylové tabulky (<link rel="stylesheet">).
  4. Vnitřní styly (<style> blok v <head>).
  5. Děděné styly.
  6. Výchozí styly prohlížeče.

Vložené styly mají specifitu odpovídající ID selektoru (#id).

Hlavní nevýhodou vložených stylů je nízká udržovatelnost. Znesnadňují centrální správu stylů, komplikují refaktoring a vedou ke duplicitě kódu. Proto se doporučuje jejich používání omezit, například pro dočasné ladicí styly nebo v komponentách, kde jsou styly dynamicky vypočítávány a vázány na konkrétní prvek.