Kód

Jak používat CSS specificitu

Pokud máte v plánu pravidelně používat CSS, musíte si uvědomit, jaká specificita je a jak se používá.

Jiné než plováky a pozice, specificita může být jedna z nejtěžších věcí, na které si zvyknout, natož pán. Selektory, které používáte ve vašem CSS, mají různé závaží a ty jsou řízeny specifičností. To je důvod, proč někdy, když použijete pravidlo na prvek, se ve vašem designu neodráží.

Pokud jste někdy spoléhali na obávané! Důležité klíčové slovo k hackování vašeho CSS, pak tento článek je pro vás.

Jak prohlížeč čte CSS

Chcete-li, aby byly vaše základy solidní, musíte vědět, jak prohlížeč skutečně čte CSS a jak jsou pravidla přepsána.

Nejprve prohlížeč přečte styl stylu shora dolů, což znamená, že tento kód: 

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

Pravidlo, které jste zadali na řádku 10, bude přepsáno a že kotevní značka bude modrá, protože prohlížeč bude považovat pravidla dále do vašeho CSS za vyšší prioritu.

To také funguje se skutečnou objednávkou importovat vaše css soubory, například:

Vzhledem k tomu, že jste zadali custom.css po styl.css, vše, co píšete ve stylu.css (prozatímní diskontování, váha selektorů) se přepíše a nahrazuje to, co je v custom.css, tato technika je často používána od tvůrců témat, aby uživateli poskytli prostor pro přidání vlastních stylů bez změny hlavního souboru. (Všimněte si však, že custom.css nenahradí styl.css úplně, budou nahrazena pouze pravidla, která jsou speciálně přepsána.)

Specificita

Všechno výše platí pouze v případě, že používáte stejnou váhu na každém voliči. Pokud specifikujete ID, třídy nebo stohovací prvky, pak jim dáváte váhu a to je specificita.

Existují čtyři kategorie, které definují úroveň specificity selektoru: inline styly (ty jsou někdy používány javascriptem), ID, třídy a prvky. Jak měřit specificitu? Specifičnost se měří v bodech s nejvyšší hodnotou bodů.

  • Hodnoty ID jsou 100 bodů.
  • Třídy mají hodnotu 10 bodů.
  • Prvky mají hodnotu 1 bod.

Znáte-li to, použijete volič podobný: 

#content .sidebar .module li a

Jeho celková hmotnost je 122 bodů (100 + 10 + 10 + 1 +1), což je ID, dvě třídy a dva prvky.

Věci, které si pamatujete

  • Hodnoty ID mají příliš vysokou váhu ve srovnání s třídami a prvky, takže byste měli omezit používání ID v stylových listech na minimum.
  • V případech, kdy mají voliče stejnou váhu, se vrátí do pořadí, ve kterém se objevují, a to s vyšší prioritou.
  • Styly vložené ve stylu HTML trumfy ve stylových listech, protože jsou blíže k prvku.
  • Jediný způsob, jak potlačit vložené styly, je použít důležité prohlášení.
  • Pseudo třídy a atributy mají stejnou váhu jako běžné třídy.
  • Pseudo prvky mají stejnou váhu jako normální prvek.
  • Univerzální volič (*) nemá žádnou váhu.

Příklady 

ul li a {color: red;}

Tento volič bude mít váhu 3, což znamená, že jen přidáním třídy někde jinde, můžete ji přepsat. 

.content #sidebar {width: 30%;}

Tento selektor má hmotnost 110 bodů hlavně kvůli ID, který přidá 100 bodů z celkového počtu 110 bodů. 

.post p:first-letter {font-size: 16px;}

Tento volič má váhu 12 bodů, protože pseudo-prvek: první písmeno váží pouze 1 bod, stejně jako p tag. 

p {font-family: Helvetica, arial, sans-serif;}

Tento volič váží pouze 1 bod, tento typ voliče by měl být použit v horní části stránky při označování základních stylů, které později mohou být pro určité oblasti přepsány.

Vždy mějte na paměti, že k přepisování voliče ID musíte zapsat pro stejný prvek 256 tříd, například: 

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Pouze tímto způsobem druhý selektor porazí jeden pomocí ID.

Závěr

Specifičnost není úchvatným aspektem CSS, ale podle mého názoru je to nejpopulárnější oblast. Získání své specifické pravosti nejenže vám pomůže vyhnout se chybám, ale urychlí váš vývoj i vaši konečnou stránku.

Přebíráte při psaní CSS ID? Už se někdy vrátíš na důležitost? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, přesný obraz přes Shutterstock.

!Důležité css osvědčených postupů css specificity nadřazené pravidla css styly