В цьому пості ми поділимося колекцією з 20 порад та кращих практик, що зроблять ваш CSS набагато кращим
1. Остерігайтеся Margin Collapse
На відміну від інших властивостей, вертикальні відступи (margin) при зустрічі конфліктують. Це означає, що коли нижній відступ одного елемента зустрічається з верхнім відступом іншого, спрацьовує лише найбільший. Ось приклад:
Замість очікуваних 70px між червоним та синім квадратами в нас лише 40px, відступ синього квадрату просто проігнорувався. Є декілька шляхів обійти це, але найкращим варіантом буде просто використовувати один з вертикальних відступів. Я рекомендую margin-bottom.
2. Використовуйте flexbox
Flexbox створили не просто так. Звісно, float та інлайн-блоки працюють, але це по суті інструменти для стилізації документів, а не сайтів. Flexbox, в свою чергу, спеціально розроблений для створення макетів. Набір властивостей, що використовуються з flexbox дають розробнику дуже гнучкий механізм створення адаптивних сторінок. З flexbox ви полюбите адаптивну верстку. На сьогодні він має дуже гарну підтримку в браузерах, так що вас нічого не повинно зупиняти.
.container {
display: flex;
/* Не забудьте додати префікс для Safari */
display: -webkit-flex;
}
Якщо це вас зацікавило, в нас є стаття, де описано 5 різних випадків використання flexbox.
3. Завжди скидайте CSS
Хоча за останні роки ситуація поліпшилася, відображення елементів в різних браузерах все ще досить відрізняється. Найкращий спосіб виправити це — скинути стилів для всіх елементів.
Для цього є вже готові бібліотеки: normalize.css, minireset та ress. Якщо ви не хочете використовувати бібліотеку, ви можете зробити це самі. Наприклад, так (це дуже зверхній приклад):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Виглядає суворо, так. Але насправді анулювання всіх відступів робить вашу роботу легшою і приємнішою. Іншою властивістю, котру слід скинути є box-sizing: border-box;, більше про неї в наступному пункті.
4. Border-box для всіх, і нехай ніхто не піде ображеним
Більшість новачків не знають про властивість box-sizing. А дарма, вона дуже важлива. Кращим способом зрозуміти її значення буде розглянути два можливі значення:
-
content-box(за умовчуванням) — коли ми задаємо ширину чи висоту елемента, змінюється розмір контенту всередині, а padding і рамка (border) додаються до цього значення. Тобто, якщо ми задамо div'у зpadding: 10pxширину 100px, то в макеті він займе 120px (100 + 10*2). -
border-box— в цьому випадку padding та рамка вже включені в розміри блока, і тепер div з шириною 100px займе рівно стільки ж місця в макеті.
Встановлення border-box для всіх елементів робить вашу роботу простіше, позбавляючи необхідності кожен раз рахувати.
5. Зображення як фон
Коли потрібно додати зображення до вашого макету (особливо, якщо він адаптивний), використовуйте тег <div> і CSS-властивість background замість <img>.
Вам може здатися, що це лише зайва робота, але насправді це полегшує їх стилізацію, збереження оригінальних розмірів та пропорцій. А все завдяки властивостям background-size, background-position та іншим.
Мінусом такого підходу є невелике зниження доступності, адже зображення не будуть коректно розпізнаватися скрін рідерами та пошуковими системами. Це можна виправити за допомогою object-fit, але він ще не має достатньої підтримки.
6. Кращі рамки для таблиць
Таблиці в HTML так собі. В них заплутана логіка, їх важко стилізувати, а зробити адаптивними ще важче. Наприклад, ви хочете додати рамку до ваших клітинок в таблиці. Скоріше за все, вийде щось на зразок цього:
Як бачите, у нас з'явилася купа повторюваних рамок, це виглядає жахливо. Як це виправити? Просто додайте border-collapse: collapse; до таблиці.
Так краще!
7. Пишіть корисні коментарі
Хоча CSS - не мова програмування, це все ще код, і він повинен бути документований. Прості коментарі, що допомагають розібратися в структурі коду стануть у пригоді вашим колегам, або вам самим у майбутньому.
Для великих ділянок, таких як стилі основних компонентів або медіа-запити, використовуйте стилізований коментар і залишіть декілька пустих ліній після:
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
Деталі, або просто менш важливі компоненти можна помічати однією стрічкою:
/* Footer Buttons */
.footer button { }
.footer button:hover { }
Запам'ятайте, у CSS немає інлайнових коментарів (// comment), завжди використовуйте /* ... */.
8. Всі люблять kebab-case
Коли імена класів чи ідентифікатори мають більше одного слова, вони повинні бути записані через дефіс (-). CSS не чутливий до регістру, тому camelCase не використовують, а нижнє підкреслення (_) раніше було заборонений в іменах, тому всі використовують дефіс.
/* не робіть так */
.footerColumnLeft { }
.footer_column_left { }
/* А так робіть */
.footer-column-left { }
Коли доходить до найменування, ви можете ще розглянути BEM, що слідує принципу розподілу на компоненти. На CSS Tricks є чудова стаття про це.
9. Не повторюйтесь
Так як таблиці у нас каскадні, то й властивості успадковуються від елемента вище. Наприклад, властивість font, давайте встановимо шрифт відразу для всієї сторінки:
html {
font: normal 16px/1.4 sans-serif;
}
Далі в коді, при необхідності, ви можете змінити шрифт для конкретного елемента. За те тепер вам не потрібно вказувати його окремо для кожної частини вашої сторінки.
10. CSS анімації за допомогою transform
Не анімуйте ваші елементи зміною ширини, висоти чи відступів. Краще використовувати властивість transform, що надає зручний спосіб для зміни вигляду елементу.
Наприклад, ми хочемо анімацію мяча, що вилітає зліва.
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Не круто */
.ball.slide-out {
left: 500px;
}
/* Круто */
.ball.slide-out {
transform: translateX(450px);
Transform може приймати велику кількість функцій (translate, rotate, scale та інші).
11. Не робіть з себе велосипедиста
Спільнота в CSS просто величезна, і нові бібліотеки виходять дуже часто. Вони допомагають вирішувати купу різних проблем. Вони бувають різні: від маленьких сніппетів до цілих фреймворків. Більшість з них з відкритим кодом (ще б пак, сховати css досить складно — прим. пер.).
Наступного разу, коли в вас виникне якась проблема в CSS, перед написанням велосипедів і милиць, пошукайте рішення на GitHub чи CodePen.
12. Тримайте пріоритет селекторів низьким
Не всі селектори в CSS рівні. Новачки зазвичай думають, что селектори, що знаходяться найнижче — перезапишуть решту. Але це не завжди так. Погляньте на приклад:
Ми хочемо, щоб при додаванні класу .active до будь-якої кнопки вона ставала червоною. Це не спрацює, так як наша кнопка вже має вказаний фоновий колір з використанням ID, який має більший пріоритет. Якщо спростити, то виглядає так:
ID (#id) > Клас (.class) > Тип (наприклад, header)
Зауважте, що a#button.active має вищий пріоритет, ніж a#button І чим більший пріоритет у ваших селекторів — тим важче ними управляти.
13. Не використовуйте !important
Зовсім. Те, що спочатку здається швидким рішенням проблем, стає великою проблемою в майбутній підтримці коду. Не лініться і знайдіть проблему в селекторі і чому він не працює, та виправте.
Єдиний випадок, коли можна використовувати !important, це перезаписання інлайн стилів, що вказані в HTML (<div>).
14. Caps Lock для акцентів, text-transform для стилю
Верхній регістр за допомогою Caps Lock в HTML слід робити лише щоб акцентувати якесь слово чи словосполучення, коли ви хочете виділити його:
<h3>Employees MUST wear a helmet!</h3>
Якщо верхній регістр - частина вашого стилю (наприклад, заголовок), то слід використовувати CSS-властивість text-transform, так зручніше і виглядає краще.
<div class="movie-poster">Star Wars: The Force Awakens</div>
.movie-poster {
text-transform: uppercase;
}
Якщо вам потрібен не верхній, а нижній регістр? Чи велика літера на початку речення? text-transform все це вміє.
15. Em, Rem та пікселі
Розробники вже давно холіварять (і будуть продовжувати) про те, що слід використовувати для встановлення розмірів елементів та шрифтів: em, rem чи px. Правда в тому, що всі три важливі і мають свої плюси (і мінуси теж).
Всі розробники та проекти різні, тому не може бути встановлено жорстких правил що слід використовувати. Але можна дати загальні рекомендації:
-
em — Розмір одного em дорівнює
font-sizeбатьківського елемента. Зазвичай використовується в медіа-запитах і дуже зручний для адаптивності, але іноді при частому використанні стає заплутаним (1.25em від 1.4em від 16px = ?) -
rem — Розмір одного rem дорівнює
font-sizeу елемента. Rem дуже зручний, один раз задавши відносні розміри ви можете пропорційно збільшувати заголовки та параграфи, потрібно лише задати абсолютний (px) розмір і змінювати його коли потрібно. -
px — Пікселі дають вам найбільший контроль за розмірами, але при їх частому використанні ви втрачаєте можливість легкого масштабування. Вони надійні, легкі для розуміння і наближені до реального значення (можливе відхилення в 1-2 пікселі).
Але це лише рекомендації, не бійтеся експериментувати і знаходити оптимальні рішення для себе.
16. Використовуй препроцесори, Люк
Ви вже чули про них: Sass, Less, PostCSS (насправді це постпроцесор — прим. пер.), Stylus. Препроцесори - наступна ланка в еволюції CSS. Вони дозволяють використовувати змінні, функції, вкладені селектори і інші круті речі, що роблять написання CSS дійсно приємним.
Наприклад, ось так в Sass використовуються змінні і функції:
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
Єдиним мінусом є те, що код на препроцесорах повинен збиратися в звичайний CSS. Проте, якщо ви вже використовуєте збиральники проектів (Grunt, Gulp, WebPack) - це не буде проблемою. А якщо не використовуєте, то слід почати.
Якщо ви вирішили спробувати, але не знаєте що саме, то в нас є порівняння Sass vs Less vs Stylus. Якщо ж вже вирішили, то в нас є статті про LESS і про Sass, і ще одна.
17. Автопрефікси для кращої сумісності
Написання префіксів для кожного браузера — це одна з найдратівливіших речей в CSS. Вони неоднакові і ви ніколи напевно не знаєте які саме вам потрібні.
Але на щастя є інструменти, що роблять це за вас.
-
Онлайн Autoprefixer
-
Плагіни для редакторів: Sublime Text, Atom
-
Бібліотека Autoprefixer (PostCSS)
18. Використовуйте мініфікований код в продакшені
Щоб поліпшити швидкість завантаження вашого сайту ви завжди повинні мініфікувати код, що зменшить його розмір (іноді зміни дуже помітні). Звісно, це робить код незрозумілим для подальшої розробки, тому завжди потрібно мати дві версії: для розробки та мініфіковану.
Зжати CSS можна декількома шляхами:
-
Онлайн інструменти CSS Minifier (є API), CSS Compressor
-
Плагіни для редакторів: Sublime Text, Atom
-
Бібліотеки Minify (PHP), CSSO та CSSNano (PostCSS, Grunt, Gulp)
19. Не забувайте про Caniuse
Різні браузери підтримують різні нововведення по різному. Використовуйте caniuse або інший схожий сервіс щоб перевірити глобальну підтримку тієї чи іншої фічі. Чи потрібні префікси, чи не спричиняє вона багів на якійсь платформі?
Але перевірки на caniuse недостатньо, ви повинні проводити тест: вручну чи автоматично, бо інколи макети ламаються без явної причини.
20. Валідація
Можливо, валідація CSS не така важлива як валідація HTML чи JS, але перевірка ваших стилів через CSS Linter вкаже на помилки, попередить про використання поганих практик і підкаже як ваш код можна поліпшити.
Зробити це теж можна різними шляхами:
-
Онлайн інструменти W3 Validator, CSS Lint
-
Плагіни для редакторів: Sublime Text, Atom
-
Бібліотеки stylelint (Node.js, PostCSS), CSSO та css-validator (Node.js)
Ще немає коментарів