CSS (Каскадні стилі) є невід'ємною частиною інструментів будь-якого веб-розробника. Він відповідає за вигляд веб-сторінок, забезпечуючи їх візуальну привабливість та зручність для користувачів. Проте, іноді CSS може бути важким для освоєння, особливо для початківців.
Фото від Glenn Carstens-Peters на Unsplash
У цьому блозі ми розглянемо 10 поширених помилок у CSS, яких часто припускаються розробники, і, що більш важливо, як їх уникнути. Давайте почнемо!
1. Не використання CSS Reset або Normalize
Браузери застосовують свої стандартні стилі, що призводить до непослідовного дизайну на різних браузерах.
Як уникнути: Використовуйте CSS reset або файл normalize.css на початку вашого проекту. Reset видаляє всі стилі браузера, а normalize.css налаштовує стилі так, щоб вони були однаковими на всіх браузерах, не очищаючи їх повністю.
/* Приклад Normalize.css */
html {
box-sizing: border-box;
}
body {
margin: 0;
line-height: 1.6;
}
2. Надмірне використання !important
Часте використання !important ускладнює підтримку та налагодження вашого CSS. Воно переважає правила специфічності, що може спричинити конфлікти в майбутньому.
Як уникнути: Зосередьтесь на написанні чистого, добре структурованого CSS з правильними селекторами. Використовуйте !important лише в крайньому випадку.
/* Уникайте цього */
.button {
background-color: blue !important;
}
/* Замість цього, краще структуруйте ваш CSS */
.container .button {
background-color: blue;
}
3. Використання ID замість класів для стилізації
ID мають вищу специфічність, ніж класи, що ускладнює їх перевизначення, коли це необхідно.
Як уникнути: Використовуйте класи для стилізації та залишайте ID для JavaScript або унікальних елементів.
/* Уникайте цього */
#header {
color: red;
}
/* Краще використовувати класи */
.header {
color: red;
}
4. Ігнорування мобільної адаптивності
Розробка лише для десктопних пристроїв може відштовхнути мобільних користувачів, які складають велику частину веб-трафіку.
Як уникнути: Використовуйте медіа-запити для того, щоб зробити ваші дизайни адаптивними. Розробляйте за підходом "mobile-first", коли це можливо.
/* Підхід mobile-first */
body {
font-size: 16px;
}
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
5. Не використання CSS змінних
Повторення однакових значень (наприклад, кольори, відступи) в CSS робить оновлення надзвичайно трудомістким та схильним до помилок.
Як уникнути: Використовуйте CSS змінні для повторно використовуваних значень, що полегшує підтримку стилів.
:root {
--primary-color: #3498db;
--padding: 16px;
}
.button {
background-color: var(--primary-color);
padding: var(--padding);
}
6. Ігнорування Box-Sizing
За замовчуванням box model може зробити розміри елементів непередбачуваними, оскільки padding та border додаються до розмірів елемента.
Як уникнути: Встановіть box-sizing: border-box глобально, щоб зробити обчислення ширини та висоти більш інтуїтивними.
* {
box-sizing: border-box;
}
7. Використання занадто глибоких рівнів вкладеності в CSS
Глибоко вкладені селектори ускладнюють читання та підтримку CSS, а також можуть призвести до проблем зі специфічністю.
Як уникнути: Зберігайте селектори поверхневими та уникайте надмірної вкладеності. Якщо потрібно, використовуйте методологію BEM (Block-Element-Modifier).
/* Уникайте цього */
.container .header .nav .link {
color: black;
}
/* Краще підхід */
.nav-link {
color: black;
}
8. Не використання скорочених властивостей
Запис кожної властивості CSS окремо збільшує розмір файлу та знижує читабельність.
Як уникнути: Використовуйте скорочені властивості для відступів, фону та інших елементів.
/* Подовжений запис */
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
/* Скорочений запис */
margin: 10px;
9. Забування про оптимізацію CSS для продуктивності
Великі, не оптимізовані CSS файли можуть уповільнити завантаження сторінки.
Як уникнути: Мінімізуйте ваш CSS і видаліть непотрібні стилі.
Інструменти, як-от PurgeCSS та CSSNano, можуть допомогти.
# Приклад використання PurgeCSS
npx purgecss --css styles.css --content index.html --output styles.min.css
10. Не тестування в різних браузерах
Ваш сайт може виглядати чудово в одному браузері, але не працювати в іншому.
Як уникнути: Тестуйте свій CSS у кількох браузерах, таких як Chrome, Firefox, Safari та Edge. Використовуйте інструменти, як BrowserStack, для тестування в різних браузерах.
[
Кращий посібник з JavaScript: Додавання або видалення стилів динамічно
Дізнайтеся, як додавати або видаляти стиль в JavaScript. Оволодійте інлайн-стилями, маніпуляцією класами та динамічними стилями...
tajammalmaqbool.com
](https://tajammalmaqbool.com/blogs/javascript-add-or-remove-style-dynamically?source=post_page-----9794988dc586--------------------------------)
[
Як перевірити, чи існує ключ в об'єкті в JavaScript
Дізнайтеся 4 методи перевірки, чи існує ключ в об'єкті в JavaScript. Цей посібник допоможе вам ефективно обробляти перевірки ключів...
tajammalmaqbool.com
](https://tajammalmaqbool.com/blogs/how-to-check-if-a-key-exists-in-an-object-javascript?source=post_page-----9794988dc586--------------------------------)
Висновок
Уникання цих поширених помилок у CSS може зекономити вам безліч годин на налагодження і уникнути розчарувань. Пишучи чистий, ефективний і організований CSS, ви створите веб-сайти, які будуть не лише красивими, а й легкими для підтримки. Пам'ятайте, CSS — це і мистецтво, і наука — практика робить досконалим!
Перекладено з: 10 Common CSS Mistakes and How to Avoid Them