CSS Shorthand vs Longhand - Hvornår skal du bruge

Shorthand og Longhand - den ene er kortfattet og den anden præcis. Man kom til eksistens ud af ønsket om kortfattethed, mens den anden står fast for at bevare klarhed. På nogen måde har de deres formål, fordele og ulemper, så at sige.

Dette indlæg vil skinne lidt på både CSS-kortfattede noteringer og longhand notationer, mens man konkluderer, hvilket er bedst at bruge i hvilken situation.

Hvad er Shorthand Property?

Shorthand ejendom er en egenskab der tager værdierne for andre sæt CSS-egenskaber. For eksempel kan vi tildele en værdi til border-width, border-style og border-color bruger grænse ejendom alene.

I bund og grund,

 grænse: 1px solid blå; 

er det samme som:

 kantbredde: 1px; grænsestil: solid; randfarve: blå;

Med dette behøver vi ikke at erklære individuelle ejendomsværdier separat (hvilket er overflødigt, tid- og pladsforbrugende). Det nulstiller også de udlodde egenskaber i erklæringen, noget der kan udnyttes.

Hvordan virker det?

Som tidligere nævnt, skriver vi et sæt andre ejendomsværdier i stenografi, ordren betyder ikke noget om alle ejendomsværdierne i stenografi er af en anden art som i grænse. For ejendomme med lignende værdier lignende margen, ordre betyder noget. Når du er i tvivl, husk med uret!

Hvad nu hvis vi savner en ejendom eller to i erklæringen? I ovenstående eksempel, lad os sige, at vi ignorerede border-style.

 grænse: 1px blå; 

Vi kan ikke se grænserne længere, ikke fordi shorthandegenskaben ikke fungerede, men fordi border-style som vi slap ud, fik standardværdien ingen. Det er sådan, at den shorthand ejendom blev gengivet.

 grænse: 1px ingen blå; 

Lad os nu tabe 1px til border-width og hold de to andre:

 grænse: solid blå;

Vi kan se grænserne, kun med en tykkere bredde, og det er fordi border-width Egenskaben fik standardværdien medium.

 border: medium solid blue; 

Det konkluderer det for os, at når en ejendomsværdi er udeladt i en stenografi erklæring, den egenskab overtager standardværdien (selvom den skal tilsidesætte enhver tidligere værdi, der er tildelt det samme).

Hvis der er kantbredde: 1px; for et element et sted før grænse: solid blå; for det samme vil grænsebredden være medium (standardværdien), ikke 1px.

En anden ting værd at nævne er det vi kan ikke bruge værdier som arve, initial eller frakoblet, som er tilgængelige for alle CSS egenskaber, i kortfattet notation. Hvis vi bruger dem, vil browseren ikke være i stand til at vide præcis hvilken egenskab denne værdi skal repræsentere i stenografi - hele erklæringen vil blive droppet.

Det alle ejendom

Der er en CSS shorthand ejendom, der kan Indstil værdien for alle CSS-egenskaber. CSS-brede værdier arve, initial og frakoblet gælder for alle ejendomme og derfor er disse de eneste værdier accepteret af alle ejendom.

 div all: initial

Dette vil gøre div element grøft alle de CSS egenskabsværdier, den havde, og nulstill standardværdien i hver af dem.

⚠ advarsel

Lad os ikke misbruge alle ejendom. Behovet for det kan kun opstå under meget sjældne omstændigheder, når vi ikke kan røre nogen tidligere CSS-kode for et element, som vi ønsker at anvende denne ejendom på.

Bemærk: CSS ejendom farve tager hexadecimal værdi med stenografi notation, hvis de to tal hex-værdi i hver farvekanal er den samme. For eksempel, baggrund: # 445599; er det samme som baggrund: # 459;.

Hvad er longhand ejendom?

Det individuelle egenskaber der kan indgå i en stenografi ejendom kaldes longhand egenskaber. Nogle eksempler er; baggrundsbillede, margin-left, animation-varighed, etc.

Hvorfor skal vi bruge det?

Selvom stenografi alternativer er nyttige, har de en ulempe. Husk i begyndelsen så vi, hvordan stenografi overstyrer eventuelle udlejede egenskaber med deres standardværdier? Dette kan være et problem, hvis nulstillingen ikke er ønsket.

Tag skrifttype shorthand ejendom for eksempel. Lad os bruge det i h4 element (som har en standard browser stil font-weight: bold)

 skrifttype: 20px "courier new"; 

I ovennævnte stenbogskode er der ingen værdi for font-weight ejendom, dermed font-weight: bold(browserens standardstil) overskrides af standardværdien font-weight: normal forårsager h4 element til at miste sin dristige stil, hvilket måske ikke har været hensigten.

Så for ovenstående eksempel er der simpel to longhand-egenskaber, skriftstørrelse og font-family er perfekte.

Også ved brug af stenografi til at tildele kun en eller to egenskabsværdier er ikke særlig nyttig. Hvorfor give browseren ekstra arbejde til at fortolke hver enkelt ejendom (herunder de venstre-ude) i stenografi, når kun en er nødvendig for at arbejde?

Produktion til side, under udviklingstrin, kan nogle udviklere (især nybegyndere) finde brug af longhand notation meget lettere at arbejde med end stenografi for bedre læsbarhed og klarhed.

Konklusion

I dag med mulighed for hurtig kodning (ved hjælp af værktøjer som Emmet) og minificering, er der ikke brug for en høj pålidelighed på stenografi, men samtidig er det meget logisk at skrive margin: 0;. Den sammenhæng, hvori vi foretrækker vores CSS-notater, vil variere og alt hvad vi skal gøre er at finde ud af, hvilken notation der fungerer bedst for os og hvornår.