Правила CSS, що заощадять Вам час і нерви!

13.03.20. Час прочитання - 7 хв

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

Кольори

Коли в проєкті використовується величезна кількість кольорів, складно не заплутатись, оскільки часом відмінності бувають зовсім непомітними: візьміть тільки #3426D1 і #3426D2. Для розв'язання цієї проблеми достатньо використовувати елементарні класи кольорів в CSS або SCSS.

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

Інша проблема - баги при використанні альфа-канальних кольорів. Зазвичай такі кольори задаються з залученням функцій rgba () або hsla (). Колір, заданий зі значенням альфа-каналу, відмінним від 1, є напівпрозорим. Колір тепер змінюється в залежності від того що знаходиться на задньому плані. Якщо колір Вам потрібен таким, яким він виглядає на білому тлі, краще використовувати hex-значення.

Деякі функції, lighten () в SASS наприклад, згенерують напівпрозорий колір, тому краще дотримуйтеся точно закодованих значень.

Інструмент CSS Grid Layout

CSS Grid дуже добре підтримується (повертаючись до IE10) і дозволяє організовувати контент без додавання контейнерних елементів на зразок Bootstrap-row або Bootstrap-col. Дизайнери часто працюють з 12-колоною сіткою, і CSS-фреймворки дотримуються цього. Але сітки, як і інтервали, повинні організовувати контент, а не обмежувати його. Сітки не повинні бути заздалегідь заточені під певний формат. Тож не варто цілком покладатися на сітку.

Вирівнювання тексту

text-align використовують для вирівнювання не тільки тексту, а й інших елементів. Але для цього краще підходить flexbox. У деяких мовах, де слова пишуться справа наліво або вертикально, властивості left і right можуть працювати некоректно. У випадку з justify проблеми можуть виникнути з мовами, де є орграфи. Також він може створити незручності людям з дислексією. Кожен з цих варіантів вирішується flexbox. Тому для таких випадків завжди використовуйте його.

Властивість outline

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

Border-box для всього

Багато новачків не знають про властивості box-sizing, але вони дійсно важливі. Найкращий спосіб зрозуміти що це - розглянути два його значення:

content-box (за замовчуванням) - коли ми задаємо ширину / висоту елемента, це просто розмір його вмісту. Всі відступи та межі знаходяться на його вершині. <Div> має ширину 100 і відступ 10, то наш елемент займе 120 пікселів (100 + 2 * 10)
border-box - відступ і межі входять в ширину / довжину. div з width: 100px; і box-sizing: border-box; займуть 100 px ширини, і неважливо які межі або відступи додані.

Установка border-box для всіх елементів дуже спрощує оформлення всього, тому що не доводиться весь час рахувати.

Переходи та анімація

transitions і animations в CSS відрізняються від opacity і transform тим, що після їх виконання браузер заново перемальовує всю сторінку. На потужному комп'ютері це ніяк не помітно, але на простеньких телефонах і ноутбуках все виглядає криво. Погана анімація виглядає гірше, ніж її відсутність.

Скидання CSS

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

Існує кілька бібліотек, таких як normalize.css, minireset, і ress, які дуже добре виправляють всі можливі невідповідності браузерів.

Непрозорість

Встановлюючи opacity на нуль, Ви практично не приховуєте елемент від інструментів спеціальних можливостей. Він досі знаходиться в документі і його може знайти будь-який охочий. Ця властивість насправді потрібна тільки у двох випадках: коли елемент з'являється в полі зору (швидка зміна opacity з 0 до 1) і при стилізації накладення діалогового вікна (таким чином вміст під вікном ще трохи помітний). Уникайте накладення напівпрозорих шарів, бо рівень прозорості (opacity) накопичується. Контент, який перебуває під двома елементами з opacity: 50%, буде виглядати так, ніби він знаходиться під одним елементом з opacity: 25%.

Зображення як фон

Додаючи картинки до Вашого проєкту, особливо якщо він буде адаптивним, використовуйте тег div з властивістю CSS background замість елементів. Це може здатися зовсім марним, але насправді це значно полегшує налаштування зображень, зберігаючи їх початковий розмір і співвідношення сторін. Все завдяки background-size, background-position та іншим властивостям.

Caniuse - Ваш друг

У різних браузерах і раніше спостерігається багато невідповідностей в сумісності. Використовуйте caniuse або подібний сервіс, щоб перевірити чи широко підтримується те, що Ви використовуєте.

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

Валідація

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

Як і minfiers і autoprefixers, існує безліч безкоштовних валідаторів:

Онлайн-інструменти: W3 Validator, CSS Lint
Текстові редактори: Sublime Text, Atom
Бібліотеки: stylelint (Node.js, PostCSS), css-validator (Node.js)

Бібліотеки

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

Наступного разу, коли Ви зіткнетеся з проблемами з CSS, спробуйте знайти рішення на GitHub або CodePen ще до того, як перепробуєте всі свої фішки.

Не використовуйте !іmportant

Серйозно, не треба. Це те, що може стати швидким рішенням, а в результаті виявиться причиною неодноразового переписування. Замість цього краще знайдіть селектор CSS, який не працює, і замініть його. Єдина допустима ситуація використання !іmportant - це коли Вам необхідно перевизначити внутрішні стилі HTML, що само по собі є тим, чого потрібно уникати.

Звичайно, це лише невелика частина порад по CSS, але вони все ж можуть значно полегшити Вам життя.