Об'єктно-орієнтований CSS

Це звучить дуже дивно, але ідеї ООП можна реалізувати в 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 - гарна практика.

Джерело