Це звучить дуже дивно, але ідеї ООП можна реалізувати в CSS, зробивши його більш зручним та швидким.
Що таке OOCSS?
Коли Ви чуєте "об'єктно-орієнтований CSS", можна подумати, що це якийсь новий CSS-препроцесор або щось, що було додано до CSS для розширення функціональності, але ні, це все той же класичний CSS, але по іншому, трохи незвично, написаний.
Одним з принципів OOCSS є відокремлення позиціонування від стилювання і тримання їх у двох різних класах так, щоб пізніше Ви мали можливість використовувати стилювання без дублювання CSS.
Припустимо, у Вас є H3
:
<h3>Я H3</h3>
Без використання цього принципу Ви б виконували стилювання так:
h3 {
padding: 10px;
font-color: #9ac689;
font-size: 16px;
font-weight: bold;
}
Спочатку це все буде працювати, але проблема з'являється тоді, коли Ви
створите інший H3
і Вам будуть потрібні такі ж характеристики, але інше
позиціонування. Це призводить до повторення в CSS.
З допомогою OOCSS, Ви б просто розділити все на класи наступним чином:
<h3 class="padding aside-header">I am an H3</h3>
.padding {
padding: 10px;
}
.aside-header {
font-color: #9ac689;
font-size: 16px;
font-weight: bold;
}
Це може виглядати більш об'ємно, але коли справа доходить до повторного використання цих властивостей, Вам не потрібно повторювати код, тож в кінці кінців, ми маємо набагато менше коду.
Другий принцип полягає в тому, щоб відокремити контейнер від вмісту. Надалі Ви зможете використовувати стилі незалежно від того, де ці елементи в DOM.
Це означає, що Ви не повинні прив'язувати елементи до їх контейнерів, краще просто викликати елемент, так ми забезпечуємо його рухливість без зміни CSS.
Ідея полягає в тому, що Ви не повинні робити щось на кшталт:
.header .nav {
background: #f1f1f1;
}
Краще зробити наступним способом:
.nav {
background: #f1f1f1;
}
Це означає, що якщо пізніше Ви забажаєте продублювати цей nav
в бічній
панелі, Вам не буде потрібно змінювати CSS в процесі, просто скопіюйте HTML-
код і все має працювати.
Переваги використання OOCSS
Як ви бачите, є великі переваги використання OOCSS у реалізації ваших проектів, а саме:
-
Швидші сайти: оскільки Ви не повторюєте код, ваш CSS-файл буде швидше завантажуватись.
-
Таблиці стилів з кращою підтримкою: немає сумнівів у тому, що використання такого підходу зробить Ваш код більш "ремонтопридатним", якщо Ви захочете змінити колір усіх H3, буде потрібно змінити один рядок, а не десять.
Деякі людям не дуже подобаються ідеї, що лежать в OOCSS, тому що це, частково, суперечить рекомендаціям, якими ми користувалися весь цей час, але, чесно кажучи, в довгостроковій перспективі, коли мова йде про збереження стильового оформлення, то OOCSS - гарна практика.
Ще немає коментарів