CSS Shorthand vs. Longhand - Kdy použít který

Krátký a Longhand - jeden je stručný a druhý přesný. Jeden z nich vznikl z touhy po stručnosti, zatímco druhý stojí pevně, aby zachoval jasnost. Ať tak či onak, mají své cíle, výhody a nevýhody, abych tak řekl.

Tento příspěvek bude svítit nějakým světlem jak na CSS zkratkových zápisech, tak i na dlouhých zápisech, přičemž se bude rozhodovat, která situace je nejvhodnější k použití..

Co je zkratka majetku?

Zkratka majetku je vlastnost, která bere hodnoty pro jiné sady vlastností CSS. Můžeme například přiřadit hodnotu border-width, hraničním stylu a hraniční barvy za použití okraj vlastnictví.

V podstatě,

 ohraničení: 1px plná modrá; 

je stejné jako:

 border-width: 1px; hraniční styl: pevná; barva okraje: modrá;

Tímto nemusíme jednotlivé hodnoty majetku vykazovat odděleně (což je zbytečné, časově a prostorově náročné). To také resetuje vynechané vlastnosti v deklaraci, něco, co může být využito.

Jak to funguje?

Stejně jako v předchozím případě zapisujeme sadu dalších hodnot vlastností do zkratky, pořadí nezáleží na tom, zda jsou všechny hodnoty vlastností ve zkratce jsou jiného druhu jako v okraj. Pro vlastnosti s podobné hodnoty jako marže, pořádek. Pokud máte pochybnosti, nezapomeňte na to ve směru hodinových ruček!

Co když nám v prohlášení chybí majetek nebo dva? Ve výše uvedeném příkladu řekněme, že jsme ignorovali hraničním stylu.

 hranice: 1px modrá; 

Už nebudeme schopni vidět hranice, ne proto, že by zkratková vlastnost nefungovala, ale proto, že hraničním stylu které jsme vynechali, dostali výchozí hodnotu žádný. To je způsob, jakým byla tato zkrácená vlastnost poskytnuta.

 hranice: 1px žádná modrá; 

Teď to nechme 1px pro border-width a udržujte ostatní dva:

 hranice: modrá;

Budeme schopni vidět okraje, jen s tlustší šířkou a to proto, že border-width vlastnost dostala výchozí hodnotu střední.

 hranice: středně plná modrá; 

To to pro nás končí když je hodnota vlastnosti vynechána ve zkráceném prohlášení, tato vlastnost převezme výchozí hodnotu (i když musí přepsat jakoukoli předchozí hodnotu přiřazenou stejné).

Pokud existuje border-width: 1px; pro prvek někde před hranice: modrá; pro stejné bude šířka hranice střední (výchozí hodnota), ne 1px.

Další věc, kterou stojí za zmínku, je to nemůžeme používat hodnoty jako zdědit, počáteční nebo unset, které jsou dostupné pro všechny vlastnosti CSS, v zkráceném zápisu. Pokud je použijeme, prohlížeč nebude schopen přesně vědět, jakou vlastnost má tato zkratka reprezentovat - celé prohlášení bude zrušeno.

Všechno vlastnictví

Existuje jedna zkratková vlastnost CSS, která může nastavte hodnotu pro všechny vlastnosti CSS. CSS hodnoty zdědit, počáteční a unset jsou použitelné na všechny vlastnosti, a proto jsou to jediné hodnoty přijaté Všechno vlastnictví.

 div all: initial

To bude dělat div element ditch VŠECHNY hodnoty CSS vlastnosti, které měl, a resetovat výchozí hodnotu v každém z nich.

⚠ Varování

Nezneužívejme toho Všechno vlastnictví. Tato potřeba může nastat pouze ve velmi ojedinělých případech, kdy se nemůžeme dotknout žádného předchozího kódu CSS prvku, který chceme tuto vlastnost použít..

Poznámka: Vlastnost CSS barva bere hexadecimální hodnotu se zkratkovým zápisem, pokud jsou dvě čísla hexadecimální hodnoty v každém barevném kanálu stejná. Například, pozadí: # 445599; je stejný jako pozadí: # 459;.

Co je to vlastnost longhand?

jednotlivé vlastnosti které lze zahrnout do zkratkové vlastnosti, se nazývají vlastnosti longhand. Některé příklady jsou; pozadí, okraj vlevo, trvání animace, atd.

Proč bychom to měli používat?

I když jsou zkratkové alternativy užitečné, mají nevýhodu. Pamatujte si na začátku jsme viděli, jak zkratka přepíše všechny vynechané vlastnosti s jejich výchozími hodnotami? To může být problém, pokud reset není žádoucí.

Vezměte si to písmo například zkratka majetku. Použijme to v h4 element (který má výchozí styl prohlížeče) font-weight: tučné)

 font: 20px "courier new"; 

Ve výše uvedeném zkratkovém kódu není zde žádná hodnota hmotnost písma vlastnictví, proto font-weight: tučné(výchozí styl prohlížeče) bude přepsán výchozí hodnotou font-weight: normální způsobující h4 prvek, aby ztratil svůj odvážný styl, který možná nebyl zamýšlen.

Takže, pro výše uvedený příklad jednoduché dva longhand vlastnosti, velikost písma a font-family jsou perfektní.

Také, používat zkratku pro přiřazení pouze jedné nebo dvou hodnot vlastností není příliš užitečné. Proč dávat prohlížeči zvláštní práci, aby interpretoval každou jednotlivou vlastnost (včetně těch, které byly vynechány) v zkratce, když je potřeba pouze jedna?

Produkce stranou, během vývojové fáze, někteří vývojáři (zejména začátečníci) mohou zjistit, že použití longhandového zápisu je mnohem snazší pracovat než zkratka pro lepší čitelnost a jasnost.

Závěr

V současné době s možností rychlého kódování (s pomocí nástrojů jako je Emmet) a minifikací není potřeba vysoká spolehlivost na zkratce, ale zároveň je to hodně logické psát. marže: 0;. Kontext, ve kterém dáváme přednost našim CSS zápisům, se bude lišit a vše, co musíme udělat, je zjistit, jaký zápis bude pro nás a kdy fungovat nejlépe.