Скорочення CSS проти Longhand - Коли використовувати які

Скорочене і довге - один короткий, а інший точний. Один прийшов до існування з бажання для стислості, а інший твердо стоїть, щоб зберегти ясність. Так чи інакше, вони мають свої цілі, плюси і мінуси, так би мовити.

Ця посада буде світити як про скорочені позначення CSS, так і про довгострокові нотації, висновок про те, що найкраще використовувати для якої ситуації.

Що таке короткострокова нерухомість?

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

В основному,

 кордон: 1px суцільно-блакитний; 

таке ж, як:

 border-width: 1px; стиль кордону: твердий; колір кордону: синій;

При цьому нам не потрібно окремо декларувати окремі значення власності (що є надлишковим, витратним на час і простір). Вона також скидає залишені в декларації властивості, які можна скористатися.

Як це працює?

Як згадувалося раніше, ми записуємо набір значень інших властивостей у скороченні, порядок не має значення, якщо всі значення властивостей у скороченні різного роду як у кордону. Для властивостей з подібні види цінностей подібна маржа, порядок має значення. У сумніві пам'ятайте за годинниковою стрілкою!

Тепер, що, якщо ми пропустимо властивість або дві в декларації? У наведеному вище прикладі, скажімо, ми ігнорували стиль кордону.

 кордон: 1px синій; 

Ми більше не зможемо побачити кордони, не тому, що скорочена власність не працювала, а тому, що стиль кордону які ми залишили, отримали значення за замовчуванням ні. Ось так одержано таку властивість.

 кордон: 1px no blue; 

Тепер давайте кинемо 1px для ширина кордону і зберегти два інших:

 кордон: суцільно блакитний;

Ми зможемо побачити кордони, тільки з більш товстою шириною і це тому, що ширина кордону властивість отримала значення за замовчуванням середовище.

 кордон: середній, синій; 

Це завершує для нас це коли значення властивості не вказано у скороченні декларації, що властивість приймає значення за замовчуванням (навіть якщо воно має замінити будь-яке попереднє значення, призначене для того самого).

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

Інша справа, про яку варто згадати ми не можемо використовувати такі значення успадковувати, початковий або unset, які доступні для всіх властивостей CSS, у скороченому позначенні. Якщо ми будемо використовувати їх, браузер не зможе точно знати, яку властивість це значення повинно представляти в скороченні - всю декларацію буде вилучено.

The все власності

Є ще одна властивість, яка може бути написана за допомогою CSS встановити значення для всіх властивостей CSS. Значення загальної CSS успадковувати, початковий і unset застосовні до всіх властивостей, і отже, це єдині значення, прийняті все власності.

 div all: initial

Це зробить div Елемент ditch ВСІХ властивостей CSS, які він мав, і скинути значення за замовчуванням у кожному з них.

. Попередження

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

Примітка: Властивість CSS колір приймає шістнадцяткове значення за допомогою скороченого позначення, якщо два числа шістнадцяткового значення в кожному кольоровому каналі однакові. Наприклад, фон: # 445599; таке ж, як фон: # 459;.

Що таке довгострокове майно?

The індивідуальні властивості які можуть бути включені в скорочене властивість, називаються довгомірними властивостями. Деякі приклади; фонове зображення, margin-left, тривалість анімації, тощо.

Чому ми повинні його використовувати?

Незважаючи на те, що скороченими альтернативами зручно, вони мають недолік. Пам'ятаєте, на початку ми бачили, як скорочено перекриває будь-які залишені властивості з їхніми значеннями за замовчуванням? Це може бути проблемою, якщо скидання не потрібне.

Візьміть шрифт наприклад, скорочення власності. Давайте використаємо його в h4 елемент (який має стиль браузера за замовчуванням font-weight: bold)

 шрифт: 20px "кур'єр новий"; 

У наведеному вище короткому коді значення не існує для font-weight власності, звідси і font-weight: bold(стиль браузера за замовчуванням) буде змінено значенням за замовчуванням font-weight: нормальний причиною h4 елемент втрачає свій сміливий стиль, який, можливо, не призначений.

Отже, для наведеного прикладу прості два довгострокових властивості, розмір шрифту і сімейство шрифтів досконалі.

Також, використовуючи скорочення для призначення лише одного або двох значень властивості не дуже корисно. Навіщо надавати браузеру додаткову роботу для інтерпретації кожної окремої властивості (включаючи залишені) у стислому вигляді, коли для роботи потрібна лише одна?

Окрім того, на стадії розробки деякі розробники (особливо для початківців) можуть знайти використання довготривалої нотації набагато простіше, ніж скорочення краща читаність і чіткість.

Висновок

На сьогоднішній день з можливістю швидкого кодування (за допомогою інструментів типу Emmet) і мініфікації, висока надійність на стенограмі не потрібна, але в той же час багато логічно вводити маржа: 0;. Контекст, в якому ми віддаємо перевагу нашим позначенням CSS, буде різним і все, що нам потрібно зробити, це з'ясувати, що нотація буде найкращою для нас і коли.