`Ghidul Complet al Specificității CSS și Cascadei` în CSS

Selectori și reguli de bază CSS Cascading Level 5

Învață să stăpânești calculul specificității CSS (Inline, ID, Clasă, Element), cum să eviți utilizarea lui !important și cum organizezi straturile cu @layer.

Sintaxă CSS

(Inline, ID, Class, Element) -> @layer reset, base, components;

Cascada este mecanismul central al limbajului CSS prin care browserul decide care regulă are prioritate atunci când mai multe declarații încearcă să schimbe aceeași proprietate (de exemplu, culoarea textului unui paragraf). Înțelegerea profundă a specificității elimină ore întregi de depanare frustrantă și elimină complet dependența toxică de cuvântul cheie !important.

Calculul Scorul de Specificitate în 4 Pași (A, B, C, D)

/* 1. Selector simplu de element: scor (0, 0, 0, 1) */
p { color: black; }

/* 2. Selector de clasă: scor (0, 0, 1, 0) -> CÂȘTIGĂ în fața elementului! */
.articol-text { color: #333333; }

/* 3. Selector combinat (clasă + pseudo-clasă + element): scor (0, 0, 2, 1) */
article.post:hover { color: #111111; }

/* 4. Selector cu ID: scor (0, 1, 0, 0) -> CÂȘTIGĂ în fața oricărui număr de clase! */
#intro-unic { color: blue; }

/* 5. Stil Inline direct pe tag: scor (1, 0, 0, 0) -> CÂȘTIGĂ în fața ID-urilor! */
/* <p style="color: green;"> */

Pseudo-clasele care Modifică Specificitatea: :is(), :where() și :not()

Pseudo-clasă	Impact asupra specificității	Scenariu util
`:where(...)`	Specificitate 0 absolut! Nu adaugă nicio greutate selectorului.	Ideală pentru stiluri de bază sau biblioteci de componente care trebuie să fie extrem de ușor de suprascris.
`:is(...)`	Preia specificitatea celui mai greu selector din lista de argumente.	Gruparea selectorilor lungi (ex: `:is(h1, h2, h3) span`).
`:not(...)`	Adaugă specificitatea celui mai greu selector exclus.	Targetarea elementelor care nu au o anumită stare (ex: `button:not(:disabled)`).

Bune Practici Arhitecturale în Proiecte Mari

Păstrează specificitatea cât mai plată: Folosește clase simple de nivel 1 (.card, .btn) și evită înlănțuirea inutilă de selectori (nu scrie div#content ul.list li.item a.link).
Nu folosi ID-uri pentru stilizare: Păstrează ID-urile exclusiv pentru ancore în pagină și identificatori JavaScript. Folosește doar clase pentru CSS.
Izolează straturile cu @layer: Pentru framework-uri, componente și utilități, lasă motorul de cascadă să ordoneze prioritățile arhitectural.