CSS Shorthand vs. Longhand - When to Use Which

Shorthand en Longhand - de ene is bondig en de ander precies. Eén kwam tot stand uit de behoefte aan beknoptheid, terwijl de ander standhoudt om helderheid te behouden. Hoe dan ook, ze hebben hun doelen, voor- en nadelen, om zo te zeggen.

Dit bericht zal enig licht werpen op zowel CSS-steno-notaties als op lange-notaties, terwijl er wordt geconcludeerd welke het beste is om te gebruiken voor welke situatie.

Wat is Shorthand Property?

Shorthand eigendom is een eigenschap die de waarden opneemt voor andere sets CSS-eigenschappen. We kunnen bijvoorbeeld een waarde toewijzen voor grensbreedte, border-style en rand kleur de ... gebruiken grens eigendom alleen.

Eigenlijk,

 rand: 1px effen blauw; 

is hetzelfde als:

 grensbreedte: 1px; randstijl: stevig; randkleur: blauw;

Hiermee hoeven we de individuele vastgoedwaarden niet afzonderlijk te declareren (wat overbodig is, tijd- en plaatsrovend). Het herstelt ook de overbodige eigenschappen in de aangifte, iets waarvan kan worden geprofiteerd.

Hoe werkt het?

Zoals eerder vermeld, schrijven we een reeks andere eigenschapswaarden in steno, de volgorde doet er niet toe of alle eigenschapswaarden in de steno zijn van een ander soort als in grens. Voor eigenschappen met soortgelijke soorten waarden zoals marge, volgorde doet er toe. Denk in geval van twijfel met de klok mee!

Nu, wat als we een of twee huizen missen in de verklaring? Laten we in het bovenstaande voorbeeld aannemen dat we hebben genegeerd border-style.

 rand: 1px blauw; 

We zullen de grenzen niet meer kunnen zien, niet omdat de steno-eigenschap niet werkte, maar omdat de border-style die we weglieten, kreeg de standaardwaarde geen. Dit is hoe die steno-eigenschap is weergegeven.

 rand: 1px geen blauw; 

Laten we nu de 1px voor grensbreedte en houd de andere twee:

 rand: effen blauw;

We zullen de randen kunnen zien, alleen met een dikkere breedte en dat komt omdat de grensbreedte eigenschap heeft de standaardwaarde medium.

 rand: medium stevig blauw; 

Dit concludeert het voor ons dat wanneer een eigenschapwaarde wordt weggelaten in een verkorte verklaring, die eigenschap neemt de standaardwaarde over (zelfs als het een voorgaande waarde moet overschrijven die voor dezelfde is toegewezen).

Als dat zo is grensbreedte: 1px; voor een element ergens eerder rand: effen blauw; voor hetzelfde, de grensbreedte zal zijn medium (de standaardwaarde), niet 1px.

Een ander ding dat het vermelden waard is, is dat we kunnen geen waarden gebruiken zoals erven, eerste of ongezet, die beschikbaar zijn voor alle CSS-eigenschappen, in steno-notatie. Als we die gebruiken, kan de browser niet precies weten welke eigenschap die waarde in de steno moet vertegenwoordigen - de volledige verklaring wordt verwijderd.

De allemaal eigendom

Er is één CSS-verkorte eigenschap die dit kan stel de waarde in voor alle CSS-eigenschappen. CSS-brede waarden erven, eerste en ongezet zijn van toepassing op alle eigenschappen en daarom zijn dit de enige waarden die worden geaccepteerd door de allemaal eigendom.

 div all: initial

Dit maakt de div element sloot ALLE CSS-eigenschapswaarden die het had en reset de standaardwaarde in elk van deze waarden.

⚠ Waarschuwing

Laten we het. Niet misbruiken allemaal eigendom. De noodzaak hiervoor kan zich alleen voordoen in zeer zeldzame omstandigheden, wanneer we geen vorige CSS-code van een element kunnen aanraken waarmee we deze eigenschap willen toepassen op.

Notitie: CSS-eigenschap kleur neemt hexadecimale waarde met korte notatie als de twee getallen van hexadecimale waarden in elk kleurkanaal hetzelfde zijn. Bijvoorbeeld, achtergrond: # 445599; is hetzelfde als achtergrond: # 459;.

Wat is eigendom uit de lange termijn?

De individuele eigenschappen die kunnen worden opgenomen in een steno-eigenschap, worden eigenschappen met een lange hand genoemd. Voorbeelden zijn; achtergrond afbeelding, -Marge, animatie-duur, enz.

Waarom zouden we het gebruiken??

Hoewel steno-alternatieven handig zijn, hebben ze wel een nadeel. Weet je nog dat we in het begin zagen hoe steno de overbodige eigenschappen overschrijft met hun standaardwaarden? Dit kan een probleem zijn als de reset niet gewenst is.

Neem de doopvont steno-eigenschap bijvoorbeeld. Laten we het gebruiken in de h4 element (dat een standaardbrowserstijl heeft font-weight: bold)

 lettertype: 20px "koerier nieuw"; 

In de bovenstaande afkortingcode is er geen waarde voor de lettertype dikte eigendom, vandaar de font-weight: bold(standaardstijl van browser) wordt overschreven door de standaardwaarde font-weight: normal waardoor de h4 element om zijn gedurfde stijl te verliezen, wat misschien niet de bedoeling was.

Dus, voor het bovenstaande voorbeeld, eenvoudige twee eigenschappen met lange-afstand, lettertypegrootte en font-family zijn perfect.

Gebruik ook steno voor het toewijzen van slechts één of twee eigenschapswaarden is niet erg nuttig. Waarom de browser extra werk geven om elke afzonderlijke eigenschap (inclusief de weggelaten objecten) in de steno te interpreteren, wanneer er maar één nodig is om te werken?

Tijdens de ontwikkelingsfase kunnen sommige ontwikkelaars (vooral beginners) vinden dat het gebruik van lange notenschrift een stuk eenvoudiger is om mee te werken dan een steno voor betere leesbaarheid en duidelijkheid.

Conclusie

Tegenwoordig met de mogelijkheid van snelle codering (met behulp van tools zoals Emmet) en minificatie, is een hoge betrouwbaarheid op steno niet nodig, maar tegelijkertijd is het een logische manier om te typen margin: 0;. De context waarin we onze CSS-notaties prefereren, varieert en alles wat we moeten doen, is uitzoeken welke notatie het beste werkt voor ons en wanneer.