CSS! Important: Ce este și când să îl utilizați
Publicat: 2020-06-27Unul dintre cele mai utile și controversate elemente ale CSS este proprietatea ! Importantă . Fiecare proiectant va întâlni la un moment dat eticheta din codul CSS. Adevărata întrebare și dilemă care apare atunci când se întâmplă acest lucru este „a fost folosită corect?” Deoarece CSS ! Important este un instrument atât de puternic, dezvoltatorii și designerii trebuie să fie conștienți de cele mai bune practici atunci când îl utilizează. CSS! Important poate duce la tot felul de coduri spaghete și acest lucru nu este bun pentru nimeni.
Ce este important CSS?
Proprietatea ! Importantă din CSS indică faptul că orice regulă la care este atașată are precedent asupra altor reguli. Este principala prioritate pentru element și selector cu care este utilizat și, prin urmare, permite dezvoltatorilor și proiectanților să aibă un control specific asupra stilului pentru părți individuale ale site-ului. În majoritatea cazurilor, aceasta înseamnă suprascrierea stilului implicit pentru site-ul conținut în styles.css sau custom.css .
Fiecare instanță de! Important se aplică numai liniei specifice pe care apare . Deci, puteți utiliza proprietatea pe anumite părți ale unui fragment, dar nu pe toate. Codul CSS pentru ! Important arată astfel:
.example-class {
color:#fff!important;
}
Principalul lucru pe care trebuie să-l rețineți ! Important este dublu:
- cuvântul important trebuie întotdeauna precedat de un semn de exclamare (!)
- punct și virgula trebuie să fie întotdeauna la sfârșitul liniei, după declarația! importantă
! important poate fi folosit de la o pagină la alta sau de la modul la modul (în cazul constructorilor de pagini precum Divi), dacă doriți - deși așa intrați în codul spaghetti a ceea ce suprascrie ce element pe care pagină și în ce ordine?
Fiecare designer, la un moment dat sau altul, va rula peste eticheta importantă CSS și va trebui să ia o decizie. Merită acest lucru să anuleze stilul implicit al site-ului?
Uneori, răspunsul este un da răsunător. Alteori, este un nu greu și rapid. Să analizăm câteva dintre cele mai bune practici cu CSS importante pentru a ști când probabil nu va sparge nimic, nici acum, nici în viitor.
Când se folosește CSS Important
Utilizarea primară (și cea mai larg acceptată) a ! Importantă este atunci când doriți ca o clasă care interacționează cu un selector primar să fie stilată diferit. Poate doriți ca titlul titlului și meta informațiile de pe blogurile dvs. să fie un font și o culoare diferiți față de restul site-ului dvs. Stilul implicit pentru aceste elemente este moștenit de la selectoarele h1 și p din fișierele CSS. Orice ați setat pentru site-ul implicit fie în fișierele dvs. .css , fie în personalizatorul temei WordPress va fi afișat.
p {
font-weight: 400;
font-size: 1.1rem;
line-height: 1.7;
color: #111;
font-family:'Roboto';
}
h1 {
margin-top: 30px;
margin-bottom: 15px;
color: #000;
font-family:'Lato';
}
Puteți schimba elementele individuale dorite (titlul postării pe blog și metainformațiile) cu cursurile. entry-title și .post-meta. Și din moment ce doriți ca aceștia să moștenească încă unele dintre stilurile de la părintele h1 și p , veți folosi h1.entry-title și p.post-meta pentru a le apela în mod specific.
h1.entry-title, p.post-meta {
color: white!important;
font-family:'Poppins'!important;
}
Dacă aveți aceste fragmente în aceeași foaie de stil, codul de sus va intra în vigoare în toate cazurile, cu excepția cazului în care sunt afișate Titluri post și Post Meta. Proprietatea importantă CSS suprascrie valoarea implicită și vă permite să aveți un control fin asupra acesteia.
Acest tip de personalizare individuală este principala utilizare a ! Important . Dar nu singurul.
Utilizați CSS Important pentru a proteja clasele, ID-urile și elementele
Puteți utiliza, de asemenea, elemente importante ale paginii dvs., importante pentru viitor, că dezvoltarea ulterioară a site-ului ar putea fi modificată în moduri neașteptate. Puteți, de exemplu, să dezvoltați un anumit stil pentru casetele de abonare sau opțiunile de e-mail sau încorporările YouTube. Fiecare dintre acestea ar putea moșteni stiluri diferite din foile dvs. de stil în diferite locuri. Folosind eticheta ! Important se poate face astfel încât să fie nevoie de o mână deliberată pentru a schimba stilul formularelor sau butoanelor.
Doar numiți elementul cu o clasă sau un ID, apoi puneți ! Important pe fiecare linie.
.youtube-embed {
font-family:'Exo'!important;
font-weight: 700!important;
line-height:1.4rem!important;
margin-top:25px!important;
margin-left:auto!important;
margin-right:auto!important
color:#449928!important;
padding:11px!important;
background:#998899;
}
Voila! Rezistență la viitor din schimbările regulate ale foilor de stil.
Utilizarea stilurilor Inline
Acesta este unul dintre acele cazuri de utilizare care pot sau nu să apară pentru mulți oameni. A fost foarte obișnuit, dar a devenit mai puțin important pe măsură ce ne-am îndepărtat de codificarea manuală a postărilor și paginilor noastre. Cu toate acestea, dacă vreodată sări în HTML-ul unui bloc Gutenberg sau în vizualizarea text a editorului clasic WordPress, poți folosi absolut ! Important cu stilul CSS în linie.
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
Acest lucru este important din câteva motive. Prima fiind că puteți controla orice linie de cod din pagina dvs., în mod specific, folosind style = "x: y! Important;" iar al doilea este că puteți suprascrie orice CSS deja aplicat acelei pagini. Chiar dacă această valoare are, de asemenea, importanță . De exemplu:
<style>
p {
color:#313373!important;
font-size:2rem;
}
</style>
<div class="special-paragraph" style="color:#blue!important;">
<p>This text will show up blue now, even though there's another !important tag
applied to the paragraph selector on this page!</p>
</div>
Chiar dacă există un stil HTML încorporat care utilizează <style> </style> care folosește ! Important pe același selector, CSS în linie care vizează paragraful specific va fi cel care se redă.
Feriți-vă de stivuirea etichetelor importante
Să luăm ultimele câteva exemple și să lansăm un cuvânt de precauție. Aceste tipuri de utilizări sunt bune în doze mici. Le puteți folosi situații unice și probabil că nimeni nu va avea vreodată probleme cu asta. Pentru că, ca o singură dată, ați folosit în mod special ! Important pentru a stiliza un element individual. Pentru care este destinat .
Cu toate acestea, dacă începeți să utilizați ! Important ca o cârjă, ca o modalitate de a evita editarea foilor de stil la fel de des sau ca soluție rapidă pentru mai multe probleme de pe același site, acesta este începutul codului spaghetti. Mai ales pentru viitorii dezvoltatori care nu sunteți voi. În timp ce s-ar putea să-ți dai seama cu greu ordinea în care redau !! Importanții , un viitor dezvoltator poate găsi imposibil.
Ce se întâmplă în cele din urmă este că există atât de multe stive ! Importante pe site, care interacționează cu mai multe foi de stil, pagini și module, pe care CSS normal le redă rar. Și uneori, chiar și ceva marcat ! Important nu redă. Sau mai rău, fiecare schimbare ulterioară trebuie marcată ! Importantă doar pentru ca aceasta să apară, cu excepția cazului în care doriți să distrugeți stilul site-ului și să-l construiți din nou.
Încheierea
CSS important este sincer unul dintre cele mai puternice instrumente din setul de instrumente al unui proiectant. Puteți regla cu ușurință orice element de pe site-ul dvs. fără a vă face griji că va afecta subordonații sau colegii. Dar, dacă îl folosiți în exces, efectele se pot transforma într-un coșmar de pagini și elemente care încearcă să se anuleze reciproc, iar ceea ce a fost cândva important a devenit implicit, dar nu poate fi setat ca implicit. Deci, încercați să utilizați ! Important cu ușurință, astfel încât atunci când aveți nevoie de ceva pentru a ieși în evidență sau pentru a fi protejat de viitor, o faceți în mod corect.
Ce părere aveți despre utilizarea CSS! Importantă în proiectele dvs.?
Imagine prezentată de articol de la wan wei / shutterstock.com