Скорочення 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, буде різним і все, що нам потрібно зробити, це з'ясувати, що нотація буде найкращою для нас і коли.