CSS Shorthand vs. Longhand - Când să utilizați ce

Shorthand și Longhand - unul este concis și celălalt precis. Unul a ieșit din existență din lipsa de corespondență, în timp ce celălalt este ferm pentru a păstra claritatea. Oricum, ei au scopurile lor, pro și contra, ca să spunem așa.

Acest post va străluci o lumină atât asupra notațiilor scurte ale CSS, cât și asupra notațiilor de lungă durată, în timp ce concluzionează ce este mai bine să folosiți în ce situație.

Ce este Shorthand Property?

Proprietatea de ștergere este o proprietate care ia valorile pentru alte seturi de proprietăți CSS. De exemplu, putem atribui o valoare pentru lățimea graniței, Stil de frontieră și border-color folosind frontieră proprietate singură.

Pe scurt,

 margine: albastru 1px; 

este la fel ca:

 lățimea frontală: 1px; stilul frontal: solid; frontieră-culoare: albastru;

Prin aceasta, nu trebuie să declare separat valorile de proprietate individuale (care sunt redundante, consumatoare de timp și spațiu). De asemenea, se resetează proprietățile din stânga din declarație, ceea ce poate fi avantajat.

Cum functioneazã?

După cum am menționat anterior, scriem un set de alte valori de proprietate în sintagmă, ordinea nu contează dacă toate valorile de proprietate din stenogramă sunt de un fel diferit ca în frontieră. Pentru proprietati cu tipuri similare de valori ca marja, ordinea contează. Când sunteți îndoieli, amintiți-vă în sensul acelor!

Acum, dacă nu ne pierdem o proprietate sau două în declarație? În exemplul de mai sus, să presupunem că am ignorat Stil de frontieră.

 frontieră: 1px albastru; 

Nu vom mai putea vedea frontierele, nu pentru că proprietatea stenografică nu a funcționat ci pentru că Stil de frontieră pe care l-am lăsat, a primit valoarea implicită nici unul. Așa s-a făcut rangul de proprietate.

 frontieră: 1px nu albastru; 

Acum hai să renunțăm 1px pentru lățimea graniței și păstrați celelalte două:

 frontieră: albastru solid;

Vom vedea frontierele, doar cu o lățime mai groasă și asta pentru că lățimea graniței proprietate a obținut valoarea implicită mediu.

 frontieră: albastru mediu solid; 

Acest lucru ne încheie pentru noi asta atunci când o valoare de proprietate este lăsată în afara într-o declarație de stenografie, acea proprietate își ia valoarea implicită (chiar dacă trebuie să suprascrie orice valoare anterioară atribuită aceluiași).

Daca exista lățimea frontală: 1px; pentru un element undeva înainte frontieră: albastru solid; pentru același lucru, lățimea graniței va fi mediu (valoarea implicită), nu 1px.

Un alt lucru care merită menționat este acela nu putem folosi valori cum ar fi moşteni, iniţială sau unset, care sunt disponibile pentru toate proprietățile CSS, în notație scurtă. Dacă le folosim, browserul nu va putea să știe exact ce proprietate ar trebui să reprezinte acea valoare în scurtătură - întreaga declarație va fi abandonată.

toate proprietate

Există o proprietate a prescurtării CSS care poate setați valoarea pentru toate proprietățile CSS. Valori CSS la nivel moşteni, iniţială și unset se aplică tuturor proprietăților și, prin urmare, acestea sunt singurele valori acceptate de către toate proprietate.

 div toate: inițial

Acest lucru va face div elementul șterge toate valorile proprietății CSS pe care le-a avut și reseta valoarea implicită în fiecare dintre ele.

⚠ Atenție

Să nu folosim greșit toate proprietate. Necesitatea poate apărea numai în cazuri foarte rare, atunci când nu putem atinge niciun cod CSS anterior al unui element pe care dorim să îl aplicăm acestei proprietăți.

Notă: Proprietatea CSS culoare ia valoarea hexazecimală cu notație scurtă dacă cele două valori hexazecimal din fiecare canal de culoare sunt aceleași. De exemplu, fundal: # 445599; este aceeași ca fundal: # 459;.

Ce este proprietatea de lungă durată?

proprietăți individuale care pot fi incluse într-o proprietate prescurtată se numesc proprietăți lungi. Câteva exemple sunt; imagine de fundal, -Marginea din stânga, animație durată, etc.

De ce să-l folosim?

Chiar dacă alternativele stenografice sunt la îndemână, ele au un dezavantaj. Amintiți-vă la început că am văzut cum stenograma înlocuiește orice proprietăți rămase cu valorile lor implicite? Aceasta poate fi o problemă dacă resetarea nu este dorită.

Luați font proprietatea shorthand, de exemplu. Să o folosim în h4 element (care are un stil de browser implicit font-weight: bold)

 font: 20px "curier nou"; 

În codul prescurtat de mai sus, nu există valoare pentru grosimea fontului proprietate, prin urmare font-weight: bold(stil implicit al browserului) va fi înlocuit cu valoarea implicită font-weight: normal cauzând h4 element pentru a-și pierde stilul îndrăzneț, care nu a fost intenționat.

Deci, pentru exemplul de mai sus, două simple proprietăți lungi, marimea fontului și familie de fonturi sunt perfecte.

De asemenea, folosind stenograma pentru atribuirea unei singure sau a două valori de proprietate nu este foarte utilă. De ce să oferiți browserului o muncă suplimentară pentru a interpreta fiecare proprietate (inclusiv cele din stânga) în stenogramă, când este nevoie doar de una singură?

Producția deoparte, în timpul etapei de dezvoltare, unii dezvoltatori (în special începătorii) pot găsi folosind o notație de lungă durată mult mai ușor de folosit decât o stenografie pentru o mai bună lizibilitate și claritate.

Concluzie

În zilele noastre, cu posibilitatea de codare rapidă (cu ajutorul unor instrumente precum Emmet) și minificare, nu este necesară o fiabilitate ridicată asupra stenografiei, dar, în același timp, este foarte logic să tastați margin: 0;. Contextul în care preferăm notațiile noastre CSS va varia și tot ce trebuie să facem este să ne dăm seama ce notație va funcționa cel mai bine pentru noi și când.