de Kevin Kononenko

Specificitatea CSS explicata prin cumparaturi fara speranta pentru haine noi

Specificitatea CSS explicată prin cumpărături fără speranță pentru haine noi

Dacă ați rătăcit vreodată într-un magazin universal sau alt magazin de îmbrăcăminte, atunci puteți înțelege modul în care selectoarele CSS își aplică stilurile.

Dacă sunteți un începător la CSS, probabil că ați văzut o mulțime de scenarii deja unde Regulile de stil CSS sunt în conflict. Credeți că tocmai ați adăugat un stil nou unui element, dar după ce ați reîmprospătat browserul de multe ori … vă dați seama că stilul nu este aplicat din anumite motive.

Iată un exemplu. Să presupunem că aveți o regulă generală conform căreia toate etichetele de paragraf ar trebui să aibă o înălțime de linie de 140%, astfel.

p{   line-height:140%; }

Dar, de asemenea, doriți să creați un subtitle clasă care va avea o înălțime de linie de 120%, care se va aplica de obicei elementelor de paragraf.

.subtitle{   line-height:120%; }

Deci, care se va aplica atunci când îl atribuiți așa?

<p class="subtitle"> This is a subtitle</p>

Răspunsul este subtitle stil de clasă, dar vreau să găsesc o modalitate mai bună de a explica regulile din spatele acestei logici. Nu doriți să deschideți inspectorul de fiecare dată când nu sunteți sigur care este stilul mai specific ..

Iată un scenariu de ajutor: imaginați-vă că sunteți agent de vânzări într-un magazin universal sau în alt magazin de îmbrăcăminte. Veți fi plătit în funcție de câte articole de îmbrăcăminte vindeți pe parcursul zilei, deci trebuie să vă petreceți timpul cu cei mai buni clienți dacă doriți să câștigați cei mai mulți bani.

Clienții care arată cel mai probabil să cumpere primesc precedenta. Clienții care vin cu o idee specifică despre ceea ce doresc sunt mai predispuși să cumpere.

CSS funcționează într-un mod similar. Va acorda prioritate celor mai specifice stiluri, care vor înlocui stilurile mai puțin specifice. Cele mai comune moduri de a adăuga stil sunt:

  • Nivel element (p etichetă)
  • Nivelul clasei (.subtitle)
  • ID
  • Stil în linie

Iată cum puteți spune care dintre selectoarele de mai sus sunt cele mai specifice. În fiecare caz, clientul caută un costum personalizat și trebuie să vindeți cât mai multe îmbrăcăminte.

Selectoare de elemente – având doar o idee vagă

Te-ai rătăcit vreodată într-un magazin cu doar un gând vag, de genul „Am nevoie de un costum pentru un eveniment săptămâna viitoare”?

Din experiența personală, vă pot spune că acesta este un mod minunat de a rămâne blocat în magazin ore în șir, încercând costume aleatorii. Oricum, aceste tipuri de clienți vor lua cel mai mult timp pentru a găsi ceva ce le place. Va trebui să discute cu câteva persoane și să încerce mai multe costume. Imaginea lor mentală despre ceea ce doresc arată astfel:

0*medgGe7inXZjhhrj

Da, habar nu au ce vor. Încă trebuie să aleagă un stil, să-și găsească gama de prețuri și apoi să-i măsoare astfel încât să îl puteți adapta.

Acesta este cel mai puțin specific mod de a căuta un costum și este similar cu stilul pentru un tip general de element. Astfel, a div cu fundal negru:

div{   background-color:black; }

Selectoare de clasă – Cel puțin știi marca …

Bine, următorul nivel deasupra unui tip general de îmbrăcăminte este un brand. Așadar, ați putea spune că vă plac îmbrăcămintea Ralph Lauren, așa că veți începe de la partea din magazin.

(Notă: Acesta nu este un afișaj Ralph Lauren din fotografie, ci doar singura fotografie stoc pe care am putut să o obțin)

Acest lucru este mai bun decât căutarea tuturor costumelor din magazin, dar înseamnă totuși că clientul va trebui să ia un pic de timp înainte de a fi dispus să cumpere. Iată cum arată CSS:

.ralphLauren{ }

Acest lucru este mai specific decât un div, ceea ce am folosit în exemplul de mai sus. Dar această declarație CSS ar putea deveni mai specifică. Din moment ce știm că clientul caută un costum Ralph Lauren, să combinăm elementul și clasa. La urma urmei, Ralph Lauren ar putea fi orice tip de îmbrăcăminte, de la cizme la pantaloni până la cămăși.

div.ralphLauren{ }
0*hSinWUd9x BdU2NJ

Acest stil va suprascrie:

  1. Toate generale div coafare
  2. ralphLauren stilul clasei atunci când clasa este aplicată unui div.

Asta pentru că este mai specific prin implicarea atât a unui element cât și a unei clase. Deci, dacă avem următoarele:

.ralphLauren{   background-color: black; } 
div.ralphLauren{   background-color:grey; }

A doua declarație este mai specifică, deci va avea prioritate pentru toți divs cu clasa ralphLauren.

Selector ID – Ei cunosc modelul exact pe care îl doresc

Selectorul ID este aproape la fel de specific pe care îl puteți obține. Este cam ca persoana care a făcut cât mai multe cumpărături online posibil și a venit la magazin cu o imagine tipărită a costumului dorit.

0*IviYwcuWUEVHewYL

Da, oamenii încă fac asta. Bine, poate îl au ca link salvat, astfel încât să-l poată deschide pe telefonul lor și să-ți arate, vânzătorul.

Bine, aș putea face asta uneori.

Oricum, dacă clientul cunoaște deja modelul specific de costum pe care îl dorește, trebuie doar să le măsurați dimensiunile și atunci vor fi gata să cumpere.

Selector ID este menit să fie utilizat doar pentru un element de pe întreaga pagină, care este mult mai specific decât selectoarele la nivel de clasă sau element. Iată un exemplu de model de costum RL123 pe care clientul a ales-o înainte de a vă întâlni:

#rl123{   background-color:navy; }

Dacă culoarea implicită pentru costumele Ralph Navy este gri, această afirmație înseamnă că modelul particular are de fapt o culoare bleumarin.

O notă rapidă despre scalabilitate: da nu doriți elemente HTML cu ID-uri personalizate și stil pe toată pagina. Aceasta va deveni o durere uriașă de întreținut. În continuare trebuie să utilizați stilul elementelor și al clasei pentru a crea rapid stiluri universale. Dar, de asemenea, trebuie să știți cum să înlocuiți aceste reguli în cazuri individuale.

Stilizare în linie – Clientul le cunoaște modelul și dimensiunile

Acesta este cel mai specific mod de a face acest lucru și, de asemenea, cel mai puțin scalabil. Poți să folosești stil în linie direct în elementul HTML pentru a suprascrie stilurile scrise în CSS.

Acest lucru este un fel ca clientul care vine la magazin și nu numai că știe costumul pe care și-l doresc, ci și ce dimensiuni le cunoaște. Au o idee foarte specifică despre ceea ce își doresc și sunt gata să comande costumul și să părăsească magazinul cât mai repede posibil. Acest lucru este minunat pentru un agent de vânzări! Deci, primește cea mai mare prioritate.

Iată cum arată acest lucru în termeni de HTML.

Vom atribui width și height atribute div cu clasa ralphLauren:

<div class="ralphLauren" style="height:100px; width:100px"></div>

Dacă am fi atribuit lățimea și înălțimea în CSS, ca în exemplele de mai sus, ar fi suprascris aici.

Wild Card -! Important

Există o altă modalitate de a schimba prioritatea regulilor de stil din CSS. Nu voi vorbi despre asta, totuși, pentru că ar trebui folosit numai în situații în care nu există altă alternativă. Încalcă toate regulile pe care tocmai le-am făcut …

Poti citiți mai multe despre! important aici.

Rezumatul final

Iată ordinea specificității diferitelor moduri de aplicare a stilului:

0*0KoWiUMj7yRS4Uln

Obțineți mai multe tutoriale de codificare vizualizate

V-a plăcut acest tutorial? Dă-i o „palme” pentru ca și alții să o poată descoperi.

Sau înscrieți-vă pentru cele mai recente tutoriale aici: