! Forțe importante o schimbare în cascadă
Una dintre cele mai bune modalități de a învăța cum să codificați site-uri web este să vă uitați la codurile sursă ale altor site-uri. Această practică este modul în care mulți profesioniști web au învățat meseria, mai ales în zilele dinainte de a exista atât de multe opțiuni pentru cursuri de web design , cărți și site-uri de formare online.
Dacă încercați această practică și priviți foile de stil cascadă (CSS) ale unui site, un lucru pe care îl puteți vedea în acel cod este o linie care spune că este important!
Ce înseamnă acest lucru și, la fel de important, cum folosiți corect acea declarație în foile de stil?
Cascada CSS
Mai întâi de toate, este important să înțelegem că foile de stil cascadă au într-adevăr cascadă , adică sunt plasate într-o anumită ordine. În general, aceasta înseamnă că stilurile sunt aplicate în ordinea în care sunt citite de browser. Primul stil este aplicat, apoi al doilea și așa mai departe.
Ca urmare, dacă un stil apare în partea de sus a unei foi de stil și apoi este modificat mai jos în document, cea de-a doua instanță a acelui stil este cea aplicată în instanțele ulterioare, nu prima. Practic, dacă două stiluri spun același lucru (ceea ce înseamnă că au același nivel de specificitate), va fi folosit ultima listă.
De exemplu, să presupunem că următoarele stiluri erau conținute într-o foaie de stil. Textul paragrafului ar fi redat în negru, chiar dacă proprietatea primului stil aplicată este roșu.
Acest lucru se datorează faptului că valoarea "negru" este afișată a doua. Deoarece CSS este citit de sus-jos, stilul final este "negru" și, prin urmare, unul câștigă.
p {culoare: roșu; }
p {culoare: negru; }
Modificări importante Prioritatea
Acum, că înțelegeți modul în care aceste reguli aproape identice sunt procesate de CSS, putem examina modul în care directiva importantă schimbă lucrurile un pic.
Directiva importantă afectează modul în care cascada dvs. CSS respectă regulile pe care le considerați cele mai importante și trebuie aplicate. O regulă care are directiva importantă se aplică întotdeauna indiferent de locul în care regula apare în documentul CSS.
Pentru a face textul paragrafului întotdeauna roșu, din exemplul de mai sus, veți folosi:
p {culoare: roșu! important; }
p {culoare: negru; }
Acum, tot textul va apărea în roșu, chiar dacă valoarea "negru" este afișată a doua. Directiva importantă se prevalează de regulile normale ale cascadei și îi conferă stilului o foarte mare specificitate.
Dacă aveți absolut nevoie ca paragrafele să apară roșii, acest stil ar face-o, dar asta nu înseamnă că aceasta este o practică bună. Următoarea uită-te la momentul în care vă recomandăm să folosiți ceva important și când nu este potrivit.
Când să utilizați! Important
Directiva importantă este foarte utilă atunci când testați și depanați un site Web. Dacă nu sunteți sigur de ce nu se aplică un stil și credeți că este vorba de o problemă de specificitate, puteți adăuga declarația importantă stilului dvs. pentru a vedea dacă acest lucru este rezolvat.
Dacă adăugați ceva important, remediați într-adevăr problema stilului, tocmai ați stabilit că este o problemă de specificitate. Cu toate acestea, nu doriți să lăsați acest cod important în loc, a fost pus doar acolo pentru scopuri de testare.
De la efectuarea testelor, ar trebui să eliminați directiva respectivă și să ajustați selectorul pentru a atinge specificul de care aveți nevoie pentru a vă face stilul să funcționeze. ! important nu ar trebui să se transforme în locurile de producție, în parte din cauza modului în care schimbă cascada normală.
Dacă vă sprijiniți prea mult pe declarația importantă pentru a vă atinge stilurile dorite, veți avea în cele din urmă o foaie de stil plină de stiluri importante. Veți schimba fundamental modul în care este procesată pagina CSS a paginii. Este o practică leneșă care nu este bună din punct de vedere al managementului pe termen lung.
Utilizați! Important pentru testare sau, în unele cazuri, când trebuie absolut necesar să înlocuiți un stil inline care face parte dintr-un cadru tematic sau de șablon.
Chiar și în acele cazuri, utilizați această abordare cât mai puțin posibil și, în schimb, încercați să scrieți foi de stil curate care înțeleg cascada.
Foi de stil pentru utilizatori
Există o notă finală cu privire la directiva importantă care este esențială pentru a înțelege. De asemenea, această directivă a fost pusă în aplicare pentru a ajuta utilizatorii paginii web să facă față foilor de stil care fac ca paginile să fie dificil de utilizat sau citite.
De obicei, dacă un utilizator definește o foaie de stil pentru a vizualiza paginile web, foaia de stil este anulată de foaia de stil a autorului paginii web. Dacă utilizatorul marchează un stil ca important, acel stil ignoră foaia de stil a autorului paginii web, chiar dacă autorul marchează o regulă ca importantă.
Acest lucru este util pentru utilizatorii care au nevoie să stabilească stiluri într-un anumit mod. De exemplu, este posibil ca cineva să aibă nevoie să mărească dimensiunile implicite ale fonturilor pe toate paginile web pe care le utilizează. Folosind directiva dvs. importantă, cu ușurință în cadrul paginilor pe care le construiți, răspundeți nevoilor speciale ale utilizatorilor dvs.
Editat de Jeremy Girard