CSS Shorthand vs Longhand - Når skal du bruke det
Shorthand og Longhand - en er konsis og den andre presis. En kom til eksistens ut av ønsket om korthet, mens den andre står fast for å bevare klarhet. Uansett har de sine formål, fordeler og ulemper, så å si.
Dette innlegget vil skinne litt på begge CSS-korttoner og longhand notasjoner, mens du konkluderer med hvilken er best å bruke for hvilken situasjon.
Hva er Shorthand Property?
Shorthand eiendom er en egenskap som tar verdiene for andre sett med CSS egenskaper. For eksempel kan vi tildele en verdi for border-bredde, border-style og grensefarge bruker grense eiendom alene.
I utgangspunktet,
grense: 1px solid blå;
er det samme som:
kantbredde: 1px; border-style: solid; border-farge: blå;
Med dette trenger vi ikke å erklære individuelle eiendomsverdier separat (som er overflødig, tid- og plasskrevende). Den tilbakestiller også de utelatte egenskapene i erklæringen, noe som kan utnyttes.
Hvordan virker det?
Som tidligere nevnt, skriver vi et sett andre verdier i stenografi, ordren spiller ingen rolle om alle eiendomsverdiene i stenografi er av en annen type som i grense. For eiendommer med lignende typer verdier som margin, ordre betyr noe. Når du er i tvil, husk med urviseren!
Nå, hva om vi savner en eiendom eller to i erklæringen? I eksemplet ovenfor, la oss si at vi ignorerte border-style.
grense: 1px blå;
Vi vil ikke kunne se grensene lenger, ikke fordi shorthandegenskapen ikke fungerte, men fordi border-style som vi la ut, fikk standardverdien ingen. Dette er hvordan den shorthand eiendommen ble gjengitt.
grense: 1px ingen blå;
La oss nå slippe 1px til border-bredde og hold de to andre:
grense: solid blå;
Vi kan se grensene, bare med en tykkere bredde og det er fordi border-bredde Egenskapen har standardverdien medium.
grense: medium solid blå;
Dette konkluderer med det for oss når en eiendomsverdi er utelatt i en kortfattet deklarasjon, den egenskapen tar på seg standardverdien (selv om den må overstyre en tidligere verdi som er tildelt for det samme).
Hvis det er kantbredde: 1px; for et element et sted før grense: solid blå; for det samme vil grensebredden bli medium (standardverdien), ikke 1px.
En annen ting verdt å nevne er det Vi kan ikke bruke verdier som arve, første eller unset, som er tilgjengelige for alle CSS-egenskapene, i kortfattet notasjon. Hvis vi bruker disse, vil nettleseren ikke kunne vite nøyaktig hvilken egenskap den verdien skal representere i kortvisningen - hele erklæringen vil bli droppet.
De alle eiendom
Det er en CSS shorthand eiendom som kan sett verdien for alle CSS egenskaper. CSS-brede verdier arve, første og unset gjelder for alle eiendommene, og derfor er disse de eneste verdiene som aksepteres av alle eiendom.
div all: initial
Dette vil gjøre div element grøft alle de CSS egenskap verdiene den hadde, og tilbakestill standardverdien i hver av dem.
⚠ Advarsel
La oss ikke misbruke alle eiendom. Behovet for det kan oppstå bare i svært sjeldne tilfeller når vi ikke kan røre noen tidligere CSS-kode for et element som vi ønsker å bruke denne egenskapen på.
Merk: CSS eiendom farge tar heksadesimal verdi med stenografi notasjon hvis de to tallene av hex-verdi i hver fargekanal er det samme. For eksempel, bakgrunn: # 445599; er det samme som bakgrunn: # 459;.
Hva er longhand eiendom?
De individuelle egenskaper som kan inngå i en shorthand eiendom kalles longhand egenskaper. Noen eksempler er; bakgrunnsbilde, margin-left, animasjon-varighet, etc.
Hvorfor skal vi bruke den?
Selv om shorthandalternativer er hendige, har de en ulempe. Husk i begynnelsen så vi hvordan stenografi overstyrer eventuelle utelatte egenskaper med standardverdiene sine? Dette kan være et problem hvis tilbakestillingen ikke er ønsket.
Ta font shorthand eiendom for eksempel. La oss bruke den i h4 element (som har en standard nettleser stil font-vekt: bold)
font: 20px "courier new";
I ovennevnte korthandskode er ingen verdi der for font-vekt eiendom, dermed font-vekt: bold(standardinnstillingene for nettleseren) overstyres av standardverdien font-vekt: normal forårsaker h4 element for å miste sin dristige stil, noe som kanskje ikke har vært ment.
Så, for eksempelet ovenfor, enkle to longhand egenskaper, skriftstørrelse og font-family er perfekt.
Også, ved hjelp av stenografi for Det er ikke veldig nyttig å tildele bare en eller to eiendomsverdier. Hvorfor gi nettleseren ekstra arbeid for å tolke hver enkelt eiendom (inkludert de venstre ute) i stenografi, når bare en er nødvendig for å jobbe?
Produksjon til side, under utviklingsstadiet, kan noen utviklere (spesielt nybegynnere) finne ved hjelp av longhand notering mye lettere å jobbe med enn kortskrift for bedre lesbarhet og klarhet.
Konklusjon
I dag med mulighet for rask koding (ved hjelp av verktøy som Emmet) og minifisering, er det ikke nødvendig med høy pålitelighet på stenografi, men samtidig er det mye logisk å skrive margin: 0;. Konteksten der vi foretrekker våre CSS-notasjoner, vil variere og alt vi trenger å gjøre er å finne ut hvilken notasjon som fungerer best for oss og når.
