Стефка CSS срещу Longhand - кога да се използва Кой

Стефан и Longhand - един е кратък и друг точен. Единият дойде до съществуването на желанието за краткост, а другият е твърдо, за да запази яснотата. Така или иначе, те имат своите цели, за и против, така да се каже.

Тази публикация ще осветява стенографските нотации на CSS и дългите нотации, докато заключението е най-добре да се използва за коя ситуация.

Какво е стенографска собственост?

Стенен имот е свойство, което приема стойностите за други набори от свойства на CSS. Например, можем да присвоим стойност за гранично-широчина, гранично-стил и граничен цвят използвайки граница собственост.

в основата си,

 граница: 1px плътно синьо; 

е същото като:

 border-width: 1px; граничен стил: твърдо; граничен цвят: син;

С това ние не трябва да декларираме отделни стойности на собственост (което е излишно, отнема време и пространство). Той също така нулира останалите свойства в декларацията, нещо, което може да се възползва.

Как работи?

Както вече споменахме, пишем набор от други стойности на свойствата в стенографски вид, като редът няма значение, ако всички стойности на свойствата са в краткото описание са от различен вид както в граница. За имоти с подобни видове ценности подобен марж, редът е от значение. Когато се съмнявате, помнете по часовниковата стрелка!

Ами ако пропуснем имот или две в декларацията? В горния пример, да речем, че сме пренебрегнали гранично-стил.

 граница: 1px синьо; 

Вече няма да можем да видим границите, не защото стенографската собственост не работи, а защото гранично-стил което оставихме, получи стойността по подразбиране нито един. Това е начинът, по който е предоставена тази стенография.

 граница: 1px няма синьо; 

Сега нека изпуснем 1 пиксел за гранично-широчина и останалите две:

 граница: плътно синьо;

Ще можем да видим границите само с по-дебела ширина и това е защото гранично-широчина имотът получи стойността по подразбиране среда.

 граница: средно твърдо синьо; 

Това го завършва за нас когато стойността на имота е пропусната в стенографска декларация, това свойство поема стойността си по подразбиране (дори ако трябва да замени предишната стойност, зададена за същата).

Ако има border-width: 1px; за някакъв елемент преди това граница: плътно синьо; за същото ще бъде и широчината на границата среда (стойността по подразбиране), не 1 пиксел.

Друго нещо, което си струва да се спомене е това не можем да използваме подобни стойности наследят, първоначален или ненаместен, които са достъпни за всички свойства на CSS, в стенографска нотация. Ако ги използваме, браузърът няма да може да знае точно коя собственост трябва да представлява тази стойност в стенографа - цялата декларация ще бъде премахната.

Най- всичко Имот

Може да има и едно кратко копие на CSS задайте стойността за всички свойства на CSS. CSS-широки стойности наследят, първоначален и ненаместен са приложими за всички свойства и следователно това са единствените стойности, приети от всичко Имот.

 div all: начално

Това ще направи Разделение елемента изхвърля ВСИЧКИ стойности на CSS свойствата, които имаше, и възстановява стойността по подразбиране във всяка от тях.

. Предупреждение

Нека не злоупотребяваме с всичко Имот. Необходимостта от това може да възникне само в много редки случаи, когато не можем да докоснем предходния CSS код на елемент, който искаме да приложим към това свойство.

Забележка: CSS собственост цвят взима шестнадесетична стойност със съкратена нотация, ако двата номера на шестнадесетичната стойност във всеки цветен канал са еднакви. Например, фон: # 445599; е същото като фон: # 459;.

Какво е собственост на дългите ръце?

Най- индивидуални свойства които могат да бъдат включени в краткотрайно свойство, се наричат ​​дълготрайни свойства. Някои примери са; фон изображение, марж-наляво, анимация продължителност, и т.н..

Защо да го използваме?

Въпреки че стенографските алтернативи са удобни, те имат недостатък. Не забравяйте, че в началото видяхме как стенограмите отменят всички оставени свойства с техните стойности по подразбиране? Това може да е проблем, ако нулирането не е желано.

Вземете шрифта например кратко описание на имота. Нека да го използваме в h4 елемент (който има стил на браузъра по подразбиране шрифт тегло: получер)

 шрифт: 20px "куриер нов"; 

В горния кратък код няма стойност за шрифт тегло собственост, следователно шрифт тегло: получер(стил на браузъра по подразбиране) ще бъде заменен от стойността по подразбиране шрифт тегло: нормално причинявайки h4 елемент да загуби смелия си стил, който може да не е бил предназначен.

Така че, за горния пример прости две дълги свойства, размер на шрифта и шрифтово семейство са перфектни.

Също така, използвайки стенограмите за присвояването само на една или две стойности на свойства не е много полезно. Защо да дадете на браузъра допълнителна работа, за да интерпретира всяко едно свойство (включително и тези, които са останали) в стенография, когато е необходим само един за работа?

Производството настрана, по време на етапа на разработка, някои разработчици (особено начинаещи) може да открият, че използването на дългите нотации е много по-лесно за работа, отколкото за кратко по-добра четливост и яснота.

заключение

Днес с възможността за бързо кодиране (с помощта на инструменти като Emmet) и минификация, висока надеждност на стенография не е необходима, но в същото време е много логично да се въведе марж: 0;. Контекстът, в който предпочитаме нашите CSS нотации, ще варира и всичко, което трябва да направим, е да разберем какво ще бъде най-доброто за нас и кога.