CSS Shorthand vs Longhand - När ska du använda det

Shorthand och Longhand - en är koncis och den andra exakta. Man kom till existens ur önskan om korthet, medan den andra står fast för att bevara tydligheten. Hur som helst har de sina syften, fördelar och nackdelar, så att säga.

Det här inlägget kommer att skina lite ljus på både CSS-kortfattade noteringar och longhand-noteringar, medan man sluter vad som är bäst att använda för vilken situation.

Vad är Shorthand Property?

Shorthand egendom är en egenskap som tar värdena för andra uppsättningar av CSS-egenskaper. Till exempel kan vi tilldela ett värde för gränsbredd, border-style och gräns färg använda gräns egendom ensam.

I grund och botten,

 gräns: 1px solid blå; 

är det samma som:

 kantbredd: 1px; gränsstil: fast; kantfärg: blå;

Med detta behöver vi inte förklara enskilda egendomsvärden separat (vilket är överflödigt, tid- och rymdkrävande). Det återställer också de bortlämnade egenskaperna i deklarationen, något som kan utnyttjas.

Hur fungerar det?

Som tidigare nämnts skriver vi en uppsättning andra fastighetsvärden i stenografi, ordern spelar ingen roll om alla fastighetsvärden i stenografi är av olika slag som i gräns. För fastigheter med liknande typer av värden liknande marginal, order spelar roll. Om du är osäker, kom ihåg medurs!

Nu, vad händer om vi saknar en fastighet eller två i deklarationen? I ovanstående exempel, låt oss säga att vi ignoreras border-style.

 gräns: 1px blå; 

Vi kommer inte att kunna se gränserna längre, inte för att shorthandegenskapen inte fungerade men för att border-style som vi släppte ut, har standardvärdet ingen. Det här är hur den shorthandegenskapen gjordes.

 gräns: 1px ingen blå; 

Låt oss nu släppa 1px för gränsbredd och behåll de andra två:

 gräns: fast blå;

Vi kan se gränserna, bara med en tjockare bredd och det beror på gränsbredd egenskapen har standardvärdet medium.

 gräns: medium solid blå; 

Detta avslutar det för oss som när ett fastighetsvärde är utelämnat i en kortfattad deklaration, den egenskapen tar sitt standardvärde (även om det måste åsidosätta något tidigare värde som är tilldelat för detsamma).

Om det är kantbredd: 1px; för ett element någonstans tidigare gräns: fast blå; för samma sak kommer gränsen bredden att vara medium (standardvärdet), inte 1px.

En annan sak att nämna är det Vi kan inte använda värden som ärva, första eller oskränkt, som är tillgängliga för alla CSS egenskaper, i kortfattad notering. Om vi ​​använder dem kan webbläsaren inte veta exakt vilken egenskap det värde ska representera i stenografi - hela förklaringen kommer att släppas.

De Allt fast egendom

Det finns en CSS shorthand egenskap som kan Ställ in värdet för alla CSS-egenskaper. CSS-breda värden ärva, första och oskränkt gäller för alla fastigheter och därför är dessa de enda värden som accepteras av Allt fast egendom.

 div allt: initial

Detta kommer att göra div dela av alla de CSS-egenskapsvärden som den hade och återställ standardvärdet i var och en av dem.

⚠ varning

Låt oss inte missbruka Allt fast egendom. Behovet av det kan uppstå endast under mycket sällsynta omständigheter, när vi inte kan röra någon tidigare CSS-kod på ett element som vi önskar att tillämpa den här egenskapen på.

Notera: CSS-egenskapen Färg tar hexadecimalt värde med stenografi notation om de två siffrorna i hex-värdet i varje färgkanal är desamma. Till exempel, bakgrund: # 445599; är samma som bakgrund: # 459;.

Vad är longhand egendom?

De enskilda egenskaper som kan ingå i en stenografi egendom kallas longhand egenskaper. Några exempel är; bakgrundsbild, margin-vänster, animering-varaktighet, etc.

Varför ska vi använda den?

Även om shorthandalternativ är praktiska har de en nackdel. Kom ihåg i början vi såg hur stenografi överstyrar alla utelämnade egenskaper med sina standardvärden? Detta kan vara ett problem om återställningen inte är önskvärd.

Ta font shorthand egendom till exempel. Låt oss använda den i h4 element (som har en standard webbläsarstil font-weight: bold)

 typsnitt: 20px "kurir ny"; 

I ovanstående stenkoder finns inget värde för font-weight egendom, därav font-weight: bold(webbläsarens standardstil) överstiger standardvärdet font-weight: normal orsakar h4 element för att förlora sin djärva stil, vilket kanske inte har varit avsedd.

Så, för ovanstående exempel, enkla två longhand egenskaper, textstorlek och typsnittsfamilj är perfekt.

Använd också stenografi för Att tilldela endast ett eller två fastighetsvärden är inte särskilt användbart. Varför ge webbläsaren extra arbete för att tolka varje enskild egendom (inklusive de vänstra) i stenografi, när bara en behövs för att arbeta?

Produktion åt sidan, under utvecklingsfasen, kan vissa utvecklare (särskilt nybörjare) finna att använda longhand notering mycket lättare att arbeta med än stenografi för bättre läsbarhet och tydlighet.

Slutsats

Idag med möjlighet till snabb kodning (med hjälp av verktyg som Emmet) och minifiering behövs inte en hög tillförlitlighet på stenografi, men samtidigt är det mycket logiskt att skriva marginal: 0;. Det sammanhang där vi föredrar våra CSS-noteringar kommer att variera och allt vi behöver göra är att räkna ut vilken notation som fungerar bäst för oss och när.