На кількох останніх інтерв’ю мене запитували про CSS методології і я не знав що відповісти. Більше п’яти років створюю сайти, а ніколи не задумувався над загальним підходом до можливих варіантів організації CSS-коду. Як говорив розробник Бен Фрейн (Ben Frain): «Писати CSS-код легко. Масштабувати і підтримувати його – важко»

В даній статті коротко розглянемо найпопулярніші методології, їхні основні характеристики, переваги і недоліки.

БЕМ

Напевно, найпопулярніша зараз методологія в світі. Назва означає «Блок, елемент, модифікатор». Сам використовував на проектах і трішки знайомий з нею.

Документація.

Складові:

блоки можуть використовуватися в декількох місцях сайту;
елементи є частиною блоку і не мають функціонального сенсу поза блоком;
модифікатори є властивості блоку або елементу, які змінюють його зовнішній вигляд або поведінку.

З цих складових будуються класи для безпосереднього використання в CSS. При цьому не слід використовувати селектори тегів (це потенційно може перешкодити використовувати блок / елемент в якомусь нестандартному місці на сайті, тобто прив’язує сутність до контексту); рекомендується також уникати каскадних селекторів, тому що отримана назва класу сама по собі досить точно (специфічно) вибирає відповідний елемент.

Такий підхід дозволяє позбутися від непередбачуваних наслідків каскаду і ізолює окремі модулі один від одного.

Мета методології БЕМ – «розробляти сайти, які необхідно швидко запустити і довго підтримувати. Методологія допомагає створювати розширюються та повторно використовувані компоненти інтерфейсу. »

Основна концепція – легка підтримка проектів з часом і повторне використання компонентів.

Головна стратегія БЕМ полягає в організації CSS-коду в повторно використовувані модулі за допомогою розумної системи іменування.

Приклад коду в стилі БЕМ:

.block_element {...} .block_element-modifier {...}

Плюси:

  • ізольованість модулів один від одного і відсутність непередбачуваних каскадів селекторів;
  • нові розробники можуть швидко зрозуміти зв’язок між компонентами в розмітці і CSS;
  • методологія сприяє підвищенню продуктивності в команді. Переваги особливо помітні у великих проектах;
  • система іменування знижує ризики колізій з класами і витік стилів;
  • CSS несильно прив’язаний до розмітки в певному місці на сторінці;
  • CSS стає повторно використовуваних.

Мінуси:

  • не завжди довгі назви класів зручні для використання (для великих проектів є сенс використовувати інструменти, що автоматизують роботу з БЕМ-розміткою);
  • високий поріг входження. Потрібно звикати до незвичного найменування класів;
  • наявність символів __ і – в класах викликають у деяких естетів огиду.

OOCSS

OOCSS означає об’єктно-орієнтований CSS (Object-Oriented CSS). В цей підхід закладено дві основні ідеї:

Розділення структури і оформлення
Розділення контейнера і контенту (вмісту)

Отже, «розділяй і володарюй». За допомогою такої структури розробник отримує загальні класи, які можна використовувати в різних місцях. Презентація.

Плюси:

  • зменшення кількості коду за рахунок повторного його використання (принцип DRY).
  • немає строго визначених правил;
  • низький поріг входження;
  • легко модифікувати таблиці стилів.

Мінуси:

  • досить складна підтримка: при зміні стилю конкретного елемента швидше за все доведеться міняти не тільки CSS (тому що більшість класів загальні), але і додавати класи в розмітку;
  • немає строго визначених правил;
  • html обростає класами.

Крім того, сам підхід OOCSS пропонує не конкретні правила, а абстрактні рекомендації, тому метод досить складний для застосування на практиці.

Зате, як це іноді трапляється, деякі ідеї OOCSS надихнули авторів на створення своїх, більш конкретних, способів структурування коду – своєрідних ФОРКОМ OOCSS.

SMACSS

SMACSS розшифровується як «Швидка і модульна архітектура для CSS» (Scalable and Modular Architecture for CSS).

Основна мета підходу – зменшення кількості коду і на спрощення підтримки коду. Документація.

Стилі складаються з 5 частин (в порядку включення їх в документ):

Base rules – базові стилі. Це стилі основних елементів сайту – body, input, button, ul, ol і т.п. У цій секції використовуються в основному селектори тегів і атрибутів, класи – в виняткових випадках (наприклад, якщо у вас стилізовані javascript’ом СЕЛЕКТА);

Layout rules – стилі макета. Тут знаходяться стилі глобальних елементів розміри шапки, футера, сайдбара і т.п. Пропонується використовувати тут id в селекторах, так як ці елементи не будуть зустрічатися більше 1 разу на сторінці. Як на мене то використання id в CSS це впринципі погана ідея і цього потрібно уникати. Ідентифікатори лише для JS прив’язок. Використовуйте класи і буде вам щастя.

Modules rules – стилі модулів, тобто блоків, які можуть використовуватися кілька разів на одній сторінці. Для класів модулів не рекомендується використовувати id і селектори тегів (для багаторазового використання та незалежності від контексту відповідно).

State rules – стилі стану. В цьому розділі прописуються різноманітні стани модулів і скелета сайту. Це єдиний розділ, в якому допустимо використання ключового слова «! Important». На мою думку, використання !important – погана практика, і CSS методологія повинна забезпечити уникнення цього інструменту.

Theme rules – оформлення. Тут описуються стилі оформлень, які з часом, можливо, потрібно буде замінити (так зручно робити, наприклад, новорічне оформлення; для html, виставлених на продаж такі стилі дозволяють перемикати колірну гамму і т.п.).

Також рекомендується вводити неймспейси для класів, що належать до певної групи, а також використовувати окремий неймспейс для класів, які використовуються в JavaScript.

Цей підхід дійсно дозволяє спростити написання і підтримку коду і останнім часом привертає чималу кількість розробників.

Atomic CSS

Atomic CSS, інколи також ACSS – атомарний CSS. У деякому роді цей підхід є OOCSS, зведений в абсолют. Оригінальна стаття.

При використанні такого підходу для кожної повторно використовуваної властивості повинен бути сформований окремий клас. Приклад: стиль «margin-top: 1px» передбачає створення класу «mt-1», стиль «width: 200px» створення класу «w-200».

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

Однак у цього підходу є суттєві недоліки! Ось вони:

найменування класів є описові назви властивостей, які не описують семантичну сутність елемента, що іноді може ускладнити розробку;
настройки відображення елементів переносяться безпосередньо в HTML (це не те, для чого були придумані таблиці стилів, чи не так?).

Плюси:

  • невеликий об’єм CSS;
  • легко вносити зміни;
  • можливість повторного використання.

У зв’язку з цими недоліками, підхід був зустрінутий істотним обсягом критики. Проте, підхід може виявитися ефективним для дуже великих проектів – здається, Yahoo! цілком задоволені використанням ACSS.

Крім того, атомарний CSS використовується в різних фреймворків для завдання коригувальних стилів елементів і в деяких шарах інших методологій.

MCSS

MCSS – багатошаровий CSS (Multilayer CSS). Цей стиль написання коду, що зародився в компанії «Однокласники», пропонує розділити стилі на кілька частин, які називаються шарами. Документація.

Нульовий шар або фундамент – тут міститься код, який відповідає за скидання стилів браузера (reset.css / normalize.css);

Базовий шар – включає в себе стилі багаторазово використовуваних на сайті елементів: кнопок, полів введення для тексту, підказок і т.п .;

Проектний шар – включає в себе окремі модулі, а також т.зв. «Контекст» – модифікації елементів в залежності від браузера клієнта, пристрої, на якому проглядається сайт / додаток, ролі користувача і т.п .;

Косметичний шар – в цьому розділі знаходиться код, написаний в стилі OOCSS, який здійснює дрібні зміни в зовнішньому вигляді елементів. Тут рекомендується залишати тільки стилі, що впливають на зовнішній вигляд і не здатні поламати верстку сайту – кольору, деякі некритичні відступи.

Дуже важлива ієрархія взаємодії шарів:

  • Шар фундаменту задає нейтральні стилі і не впливає на інші шари.
  • Елементи базового шару можуть впливати тільки на класи свого ж шару. Приклад: іконки на сайті можуть мати розміри 25×25, але іконки в кнопках – 16×16.
  • Елементи проектного шару можуть впливати на базовий та проектний шар. Приклади: іконки в формі логіна мають особливий розмір 20×20; модуль «Покупка» може включати в себе форму логіна, стилі якої трохи модифіковані.
  • Косметичний шар оформлений у вигляді описових OOCSS-класів ( «атомарні» класи) і не впливає на інший CSS-код, вибірково застосовуючись в розмітці.

Рекомендую також переглянути відмінну презентацію, присвячену MCSS – там ви зможете дізнатися більше про MCSS і не тільки.

Плюси:

  • чудово ізольовані модулі;
  • жорстко визначена логіка.

Мінуси:

  • трохи незвичне розміщення класів;
  • складна логіка розміщена по шарах і правилах взаємодії між шарами.

AMCSS

Назва означає «Модулі атрибутів для CSS» (Attribute Modules for CSS). Це досить незвичайний підхід, згадування якого, проте, все частіше зустрічаються в блогах гуру розробки. Документація.

Якщо узагальнити, цей спосіб є кілька більш людино-читаємим поданням БЕМ-структури. Давайте розглянемо приклад:

<div class="button button--large button--blue">Кнопка</div>

Такий ланцюжок класів не надто приємний для очей, тому давайте згрупуємо ці значення по атрибутам.

Ось що вийде:

<div button="large blue">Кнопка</div>

Щоб уникнути колізій імен непогано б додати атрибутам неймспейси, чи не так? Тоді код нашої кнопки прийме наступний вигляд:

<div am-button="large blue">Кнопка</div>

Якщо ви використовуєте валідатор для перевірки коду на коректність, не забувайте також додати приставку «data-» перед назвою атрибута.

Для запису CSS-коду використовується маловідомий селектор «~ =» (IE7 +), який працює як атрибут класу: вибирає елементи, значення атрибутів яких містять зазначені слова, розділені пробілами. Так, селектор виду a [class ~ = «link»] [class ~ = «button»] аналогічний селектору a.class.button (навіть по специфічності, так як специфічності селектор по класу і по атрибуту рівні один одному!).

Відповідно, CSS-код

.button {...}

.button--large {...}

.button--blue{...}

перетвориться в

[am-button] {...} 

[am-button~="large"] {...}

[am-button~="blue"] {...}

Ну як? Якщо ви вважаєте такий код занадто оригінальним, для вас існує менш радикальна форма використання AMCSS:

<div am-button am-button-large am-button-blue></div>

FUN

FUN означає «плоска ієрархія селекторів, службові стилі, компоненти з неймспейсамі» (Flat hierarchy of selectors, Utility styles, Name-spaced components). Ну або веселощі =)

За кожною літерою назви стоїть певний принцип:

  • F, плоска ієрархія селекторів: в стилях рекомендується використовувати класи для вибору елементів, не вкладати селектори (уникати каскаду без необхідності), а також не використовувати id;
  • U, службові класи: заохочується створення службових атомарних стилів для вирішення типових завдань верстки, наприклад, w100 для «width: 100%» або fr для «float: right»;
  • N, компоненти з неймспейсамі: рекомендується додавати неймспейси для завдання стилів елементів конкретних модулів; такий підхід дозволить уникнути збігу в назвах класів.

Деякі розробники відзначають, що код, написаний з використанням цих принципів досить зручно писати і підтримувати; в деякому роді автор взяв найкраще від БЕМ і SMACSS і виклав ці техніки в простий і лаконічній формі.

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

ECSS

Enduring CSS (витривалий CSS) або eCSS. Документація – Сайт eCSS

Центральна концепція eCSS – ізоляція. Ізоляція означає, що всі компоненти являють собою ізольовану одиницю коду без залежностей, контексту. Цю одиницю можна використовувати повторно і видаляти без ризику витоку стилів.

В основному це досягається за рахунок:

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

Другий пункт дає нам зрозуміти, що повторення властивостей і значень для eCSS не проблема. В цьому плані eCSS радикально відходить від таких методологій, як БЕМ і SMACSS, які розширюють і абстрагуються від існуючих компонентів, тим самим уникаючи або намагаючись якомога сильніше уникнути повторення коду.

Чи означає це, що eCSS ускладнює файли стилів? Не обов’язково. Після кількох тестів зі стиснення файлів автор методології прийшов до висновку, що через те, що gzip неймовірно ефективно стискає повторювані рядки, різниця у вазі файлу між eCSS і іншими методологіями крихітна.

Плюси:

  • ізоляція всіх візуальних шаблонів полегшує обслуговування CSS-коду;
  • незважаючи на повторювані властивості і значення, розмір файлу в довгостроковій перспективі майже не збільшиться. Це відбувається тому, що модулі є автономними, ізольованими одиницями, які можна швидко видалити без страху поламати дизайн, якщо вони більше не потрібні;
  • всі мовні / технічні файли, необхідні для створення модуля, розташовані в одній папці, що сильно спрощує редагування та фізичне видалення.

OPOR

Суть методологіі в тому, що всі правила і рекомендації настільки прості, що вміщаються на одній сторінці. Тому вона називається OPOR (One Page of Rules). Поєднує найкращі риси БЕМ, SMACSS, OOCSS. Підходить для невеликих проектів.

Іменування класів основних блоків
Майже як в БЕМ: блоки (.block), елементи (.block__elem), модифікатори (.block_mod). Але модифікатори не в форматі _property_value, а просто _something.

Плюси:

  • чіткі правила іменування;
  • легкі правила іменування.

Мінуси:

  • задає лише правила іменування;
  • чудово підходить лише для невеликих сторінок і проектів.

Додаткова література:

https://habrahabr.ru/post/256109/
https://webformyself.com/css-metodologii-css-bem-smacss-ecss/

Схожі статті