Скорочений синтаксис CSS вважається антишаблоном

27

Від автора: я часто стикаюся з невеликий, але дивно значущою проблемою, коли працюю з чиїмось кодом, роблю рефакторинг, перевіряю його. І проблема полягає у використанні скороченого синтаксис CSS.

Як правило, люди бачать в скороченому синтаксисі тільки плюси: менше натискаєш на клавіші, менше рядків коду, менше переданих даних. Начебто круто! Однак у такого синтаксису є один неприємний побічний ефект: він часто скидає інші властивості, які ми і не думали змінювати.

Коли ми пишемо щось таке:

.btn {
background: red;
}

…ми хочемо зробити фон кнопки червоним. Але насправді ми отримуємо наступне:

.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

Прописавши властивість у скорочено варіанті, ми неявно вирішили, що зображення більше не буде починатися з лівого верхнього кута, скинули повторення Х та У, скинули прокрутку і т. д.

Майже кожна проблема, баг і регрес в CSS у великому масштабі відбуваються із-за того, що ми написали дуже багато і не подумали, після чого розплачуємося нижче за кодом. Все зводиться до одного факту: в CSS потрібно робити тільки той мінімум, який необхідний.

Зловживання скороченим синтаксисом – прямий шлях наробити справ, не подумавши, чого слід уникати. Стилі набагато складніше скасувати, ніж поставити.

У цьому прикладі код насправді повинен бути таким:

.btn {
background-color: red;
}

Ось тепер ми зробили саме те, що хотіли, і нічого більше. Ще один такий приклад, який мені попався в проекті клієнта раніше в цьому році, був таким:

.base-class {
background-position: 0 0;
background-repeat: no-repeat;
}
.base-class—modifier {
background: radial-gradient(…)
}

Розробник, із зрозумілих причин, скористався генератором для створення складного радіального градієнта, але вийшло так, що на екрані взагалі нічого не відобразилося. Помилок в написанні градієнта не було, autoprefixer відпрацював добре, але з якихось причин сторінка виглядало сильно поламаною.

Вони не могли зрозуміти, в чому помилка, і дійшло до того, що розробнику сказали «дайте Гаррі подивитися на код градієнтів». Роки досвіду за плечима інстинктивно підказали мені, куди дивитися, і, звичайно ж, я знайшов помилку. У Sass в генераторі градієнтів було заховано скорочене властивість background.

Ця проблема часто зустрічається в генераторах градієнтів, тому:

швидко поновіть свої генератори градієнтів;

зробіть запит на змінення коду в ті проекти, у яких, наскільки ви знаєте, повинен використовуватися скорочений синтаксис;

перевірте вставлений з онлайн генераторів код.

Приклад з background – один з багатьох, де не можна використовувати скорочений синтаксис. Інший частий приклад – вертикальне центрування за допомогою margin: 0 auto;:

.wrapper {
margin: 0 auto;
}

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

Якщо необхідно центрувати div, не змінюйте верхні і нижні відступи. Краще візьміть довгу версію властивості:

.wrapper {
margin-right: auto;
margin-left: auto;
}

Проженіть рядок 0 auto через grep.

Винятки

Досі ми розглядали проблему необережного скидання інших властивостей, проте бувають сценарії, коли скорочені властивості можна використовувати. Розберемо приклад:

.box {
padding: 10px;
}

Тут ми нічого випадково не відкидаємо, тому що ми хочемо застосувати паддінґ в 10px до всіх чотирьох сторонах. Тут скорочений варіант нормально підходить. Ще:

.btn {
padding: 12px 24px;
}

…і:

.foo {
margin: 12px 17px 16px 10px;
}

Тут (хоча я б засумнівався в правильності використання чарівних чисел) ми явно вказуємо значення для усіх чотирьох сторін, тут скорочений варіант підходить.

Основний момент, який потрібно запам’ятати тут, полягає в тому, що скорочений синтаксис не можна використовувати, коли це впливає на властивості, які ми не хочемо змінювати.

Випадковий скидання властивостей особливо викликає багато проблем у модульних і комплексних системах, де безліч класів можуть використовуватися в парі для формування більш складних композицій. Про частини коду, які можна об’єднати без колізій і конфліктів, кажуть, що їм не вистачає ортогональності – важливий принцип проектування програмного забезпечення.

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

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