CSS методології. CSS БЕМ, SMACSS, ECSS

21

Від автора: у цій статті я розповім вам про три успішних підходу до CSS-архітектурі, про їх принципи, цілі та переваги. Це методології CSS БЕМ, SMACSS і ECSS.

Чому CSS-код виходить з-під контролю?

Як відомо, підтримувати стислість коду, робити його повторно і обслуговуються досить важко. Якщо нехтувати будь-якою послідовністю в написанні коду, то код може вийти з-під контролю, як в малих, так і середніх та великих проектів, у яких задіяно більше одного розробника.

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

Найчастіше вибір методології, найбільш підходить під ваші потреби – це інтерактивний процес, який починається з ознайомлення з тим, що вже є в мережі.

Нижче представлені три методології, які допоможуть вам у боротьбі з поганими стилями.

БЕМ

CSS методології. CSS БЕМ, SMACSS, ECSS

БЕМ розшифровується як Блок-Елемент-Модифікатор. Методологія CSS-архітектури, створена в Yandex.

Мета методології БЕМ

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

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

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

Що таке блок?

Знаходження блоків – вирішальний фактор застосування методології БЕМ. Блок це: «Функціонально незалежний компонент сторінки, який може бути повторно використаний. В HTML блоки представлені атрибутом class.» — Документація БЕМ

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

Блоки можна спокійно вкладати один в одного. Наприклад, блок хедера можна помістити блок меню.

Блоки можна використовувати в будь-якому місці на сторінці, тому в CSS-код для блоків не повинно бути ніяких зовнішніх відступів і правил позиціонування.

І нарешті, при виборі імені переконайтеся, що воно описує призначення блоку, а не його зовнішній вигляд чи стан. Іншими словами, ім’я має відповідати на питання: що це? (наприклад, хедер, меню тощо). Питання не повинен бути типу «як це виглядає» (наприклад, фіксований хедер, маленьке меню і т. д.).

Що таке елемент?

За методологією БЕМ елемент: «Складова частина блоку, яка не може використовуватися у відриві від нього.»

Принципи застосування елементів:

елементи живуть тільки в блоках;

елементи не можуть належати іншим елементам, вони можуть бути лише в блоках;

можна створювати вкладені елементи;

імена елементів описують їх призначення, а не зовнішній вигляд;

при іменуванні елементів необхідно дотримуватися стилю block__element.

Що таке модифікатор?

Модифікатор: «Сутність, що визначає зовнішній вигляд, стан або поведінку блоку або елемента.»

Наприклад, блок хедера може бути зафіксований у верхній частині сторінки, блок акордеона може відкриватися і закриватися, блок кнопки може бути відключений і т. д.

Спосіб іменування модифікаторів у БЕМ: block__element_modifier.

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

Плюси БЕМ

У БЕМ є кілька переваг

нові розробники можуть швидко зрозуміти зв’язок між компонентами в розмітці і CSS;

методологія сприяє підвищенню продуктивності в команді. Переваги особливо помітні у великих проектах;

система іменування знижує ризики колізій з класами і витік стилів;

CSS несильно прив’язаний до розмітки у визначеному місці на сторінці;

CSS стає повторно.

SMACSS

CSS методології. CSS БЕМ, SMACSS, ECSS

Масштабована і модульна архітектура CSS або SMACSS – методологія веб-розробки для організації та написання CSS-коду. Творець Jonathan Snook описує її так:

«SMACSS – це спосіб вивчити ваш процес проектування, а також спосіб пристосувати ці жорсткі рамки під гнучкий розумовий процес. Це спроба документування послідовного підходу до розробки сайту з використанням CSS.» — Сайт SMACSS

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

Базові категорії SMACSS:

Base – в цю категорію входять правила, які визначають зовнішній вигляд елементів за замовчуванням. Поодинокі селектори елементів, селектори атрибутів, селектори псевдокласів, суміжні селектори і т. д. Наприклад, html, body, a, a:hover і т. д.

Layout – категорія для стилів, за допомогою яких сторінка поділяється на секції.

Module – модулі – це повторно використовувані частини дизайну, як в лего. Наприклад, меню, діалогові вікна, пошукової блок і т. д.

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

Theme – категорія схожа на State, в неї входять стилі, що відповідають за зовнішній вигляд макетів і модулів. Ця категорія потрібна не у всіх проектах, але знати про неї необхідно.

Система іменування SMACSS

Під категорії, описані зверху, SMACSS пропонує систему іменування, допомагає з організацією коду і підвищує продуктивність команди розробників.

До правил Layout, State і Module додається префікс з осмисленим ім’ям або скороченням. Для правил Layout можна використовувати префікс layout-, grid — або навіть l-. Для правил State необхідно додавати префікс стану is-. Наприклад, is-hidden, is-visible і т. д. Для модулів використовуйте самі імена компонентів, наприклад, .menu .dialog і т. д.

Наприклад, для стилів діалогового вікна можна використовувати селектори типу .dialog.is-open. Пов’язані елементи всередині модуля і варіації модуля повинні використовувати базове ім’я модуля як префікс. Намагайтеся не використовувати id, елементні селектори і вкладені селектори. Наприклад, щоб вибрати пункт меню у модулі menu, використовуйте щось типу .menu-link або .menu-item, а не .menu li a.

На відміну від БЕМ, SMACSS не наказує занадто суворе угода про іменування. Jonathan Snook дав чітко зрозуміти: «… не думайте, що потрібно жорстко дотримуватися цих правил. У вас є угода, задокументуйте і дотримуйтеся його.»

Переваги SMACSS

Кілька переваг підходу SMACSS при написанні CSS:

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

SMACSS швидко вивчити (і навчити);

система іменування SMACSS менш докладно і в чомусь простіше БЕМ;

система досить гнучка, щоб працювати з великими і маленькими проектами.

ECSS

CSS методології. CSS БЕМ, SMACSS, ECSS

Enduring CSS (витривалий CSS) або eCSS це: «Керівництво до написання стилів для великих, що швидко змінюються, довгоіснуючих веб-проектів.» — Сайт eCSS

Мене зацікавила ця CSS-методологія з точки зору первісної проблеми, яку зачепив автор Ben Frain. І ця проблема – робота з CSS в масштабі.

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

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

інкапсуляції всього коду, не тільки CSS, а всіх технологій, необхідних для будівництва всіх компонентів у своїх загальних папках;

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

використання суворої системи іменування.

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

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

Переваги eCSS

Що ви отримаєте, якщо приймете методологію eCSS і закриєте очі на повторення:

ізоляція всіх візуальних шаблонів полегшує обслуговування CSS-коду;

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

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

Висновок

Написання обслуговуваного і добре організованого CSS-коду пов’язано зі своїми труднощами. У цій статті я розповіла вам про три методології, які можуть допомогти з цим завданням. Це не повний список, і ні один з цих підходів не вирішує всіх проблем, з якими ви можете зіткнутися в проекті.

Спробуйте і з’ясуйте, що вам підійде. Також можна спробувати поєднати БЕМ і SMACSS, або навіть виробити свою методологію на основі певних проблем, які необхідно вирішити.

А які у вас золоті правила з написання організованого та обслуговуваного CSS-коду? Як думаєте, методології можуть полегшити завдання? Пишіть в коментарях.