CSS lühikirjeldus vs pikaajaline - millal kasutada

Lühike ja pikaajaline - üks on lühike ja teine ​​täpne. Üks tuli eksisteerima lühiduse taha, teine ​​seisis kindlalt, et säilitada selgus. Mõlemal juhul on neil oma eesmärke, plusse ja miinuseid nii öelda.

See postitus paistab mõningast valgust nii CSS-i lühikirjelduste kui ka pika tähemärkide kohta, järeldades, milline on kõige parem kasutada, millises olukorras.

Mis on lühiajaline vara?

Stiilne vara on omadus, mis võtab teiste CSS-omaduste kogumite väärtused. Näiteks saame määrata väärtuse piiri laius, piiri stiilis ja äärevärv kasutades piiri üksi.

Põhimõtteliselt,

 piir: 1px sinine; 

on sama nagu:

 piiri laius: 1px; piiri-stiil: tahke; äärevärv: sinine;

Sellega ei pea me individuaalset vara väärtust eraldi deklareerima (mis on üleliigne, aeg ja ruumi tarbiv). Samuti taastab see deklaratsioonis vasakpoolsed omadused, mida saab ära kasutada.

Kuidas see töötab?

Nagu eelnevalt mainitud, kirjutame lühikirjelduses ka muid vara väärtusi, tellimus ei oma tähtsust, kas kõik stenogrammi vara väärtused on erinevad nagu sisse piiri. Omaduste puhul sarnaseid väärtusi nagu marginaal, see on oluline. Kahtluse korral mäleta päripäeva!

Mis siis, kui me deklaratsioonist maha jääme vara või kaks? Ülaltoodud näites ütleme, et me ignoreerisime piiri stiilis.

 piir: 1px sinine; 

Me ei suuda enam piire näha, mitte sellepärast, et stenogramm ei toimi, vaid sellepärast, et piiri stiilis mille me välja jätsime, saime vaikeväärtuse mitte ükski. Nii sai see lühiajaline vara.

 piir: 1px mitte sinine; 

Nüüd laseme 1tk jaoks piiri laius ja hoidke ülejäänud kaks:

 piir: tahke sinine;

Me näeme piire, ainult paksema laiusega ja sellepärast, et piiri laius vara sai vaikeväärtuse keskmise.

 piir: keskmine tahke sinine; 

See järeldab sellest meile kui vara väärtus jäetakse välja stenogrammi deklaratsioonis, see vara võtab oma vaikeväärtuse (isegi kui see peab tühistama mis tahes varasema sama väärtuse).

Kui seal on piiri laius: 1px; elemendi jaoks kusagil varem piir: tahke sinine; sama on ka piiri laius keskmise (vaikeväärtus), mitte 1tk.

Teine asi, mida väärib märkimist, on see me ei saa selliseid väärtusi kasutada pärida, esialgne või unset, mis on saadaval kõigi CSS-i omaduste jaoks, stenogrammina. Kui me neid kasutame, ei saa brauser täpselt teada, milline omadus peaks väärtuses stenogrammis esitama - kogu deklaratsioon tühistatakse.

The kõik vara

Võimalik on üks CSS stenogramm määrake kõigi CSS-i omaduste väärtus. CSS-väärtused pärida, esialgne ja unset on kohaldatavad kõigi omaduste suhtes ja seega on need ainukesed väärtused, mida kõik vara.

 div all: esialgne

See teeb div elemendi kraavi KÕIKI CSS-i omaduste väärtustest ja lähtestage iga neist vaikeväärtus.

⚠ Hoiatus

Ärgem kasutagem valesti kõik vara. Vajadus selle järele võib tekkida ainult väga harvadel juhtudel, kui me ei saa puudutada elementi eelmist CSS-koodi, mida soovime seda omadust rakendada.

Märge: CSS-i omadus värv Kui heksade väärtused on kõikides värvikanalites ühesugused, võtab see heksadecimaalse väärtuse stenogrammiga. Näiteks, taust: # 445599; on sama mis taust: # 459;.

Mis on pikaajaline vara?

The individuaalsed omadused mida võib lisada stenogrammi omadusele, nimetatakse pikaajalisteks omadusteks. Mõned näited on; taustapilt, marginaal vasakule, animatsiooni kestus, jne.

Miks peaksime seda kasutama?

Kuigi lühikesed alternatiivid on kasulikud, on neil ebasoodne. Pidage meeles, et alguses nägime, kuidas stenogramm tühistab kõik vaikimisi välja jäetud omadused? See võib olla probleem, kui lähtestamist ei soovita.

Võtke font näiteks stenogramm. Kasutagem seda h4 element (millel on vaikimisi brauseri stiil) font-weight: bold)

 font: 20px "courier new"; 

Ülaltoodud stenogrammi koodis pole väärtust fondi kaal vara, seega font-weight: bold(brauseri vaikimisi stiil) tühistab vaikeväärtuse fondi kaal: normaalne põhjustab h4 kaotada oma julge stiili, mis ei pruugi olla mõeldud.

Niisiis, ülaltoodud näite puhul on kaks lihtsat omadust, kirjasuurus ja font-pere on täiuslikud.

Kasutades ka stenogrammi ainult ühe või kahe vara väärtuse määramine ei ole väga kasulik. Miks anda brauserile lisatööd, et tõlgendada iga üksiku vara (sealhulgas vasakpoolsed) tõlgendamist, kui töötamiseks on vaja ainult ühte?

Tootmine kõrvale, arendusetapi ajal võivad mõned arendajad (eriti algajad) leida, et kasutades pika tähisega märksa lihtsamalt töödelda kui stenogramm paremini loetav ja selgem.

Järeldus

Tänapäeval on kiire kodeerimise võimalusega (Emmeti vahenditega) ja minimiseerimisega vajalik, et lühikirjeldust ei ole vaja usaldusväärselt, kuid samal ajal on palju loogiline sisestada varu: 0;. Kontekst, milles eelistame meie CSS-märke, on erinev ja kõik, mida peame tegema, on välja selgitada, mis märge toimib meile ja millal kõige paremini.