Від автора: у цій статті я розповім вам про три успішних підходу до CSS-архітектурі, про їх принципи, цілі та переваги. Це методології CSS БЕМ, SMACSS і ECSS.
Чому CSS-код виходить з-під контролю?
Як відомо, підтримувати стислість коду, робити його повторно і обслуговуються досить важко. Якщо нехтувати будь-якою послідовністю в написанні коду, то код може вийти з-під контролю, як в малих, так і середніх та великих проектів, у яких задіяно більше одного розробника.
Якщо код великий, з часом у нього вносяться зміни, а організація відсутня, то це призводить до того, що команди розробників починають додавати нові стилі в кінець документа. Розробники перестають видаляти шматки коду і змінювати вже наявні. Основна причина в тому, що найчастіше видалення та редагування стилів може призвести до несподіваних наслідків, а також до поломки дизайну в окремих місцях. Це програшна стратегія, яка може призвести до дублювання коду, проблем специфічності, де перевизначення правил перетворюється в цілу битву і загальне роздування коду.
Найчастіше вибір методології, найбільш підходить під ваші потреби – це інтерактивний процес, який починається з ознайомлення з тим, що вже є в мережі.
Нижче представлені три методології, які допоможуть вам у боротьбі з поганими стилями.
БЕМ
БЕМ розшифровується як Блок-Елемент-Модифікатор. Методологія CSS-архітектури, створена в Yandex.
Мета методології БЕМ
«розробляти сайти, які необхідно швидко запустити і довго підтримувати. Методологія допомагає створювати розширювані та повторно використовувані компоненти інтерфейсу.»
Основна концепція – легка підтримка проектів з часом і повторне використання компонентів.
Головна стратегія БЕМ полягає в організації CSS-коду в повторно використовувані модулі з допомогою розумної системи іменування. Давайте познайомимося ближче.
Що таке блок?
Знаходження блоків – вирішальний фактор застосування методології БЕМ. Блок це: «Функціонально незалежний компонент сторінки, який може бути повторно використаний. В HTML блоки представлені атрибутом class.» — Документація БЕМ
При знаходженні блоку запитайте себе, чи можете ви легко видалити цей шматок коду і використовувати його десь ще. Наприклад, блоком будуть хедер і футер сайту.
Блоки можна спокійно вкладати один в одного. Наприклад, блок хедера можна помістити блок меню.
Блоки можна використовувати в будь-якому місці на сторінці, тому в CSS-код для блоків не повинно бути ніяких зовнішніх відступів і правил позиціонування.
І нарешті, при виборі імені переконайтеся, що воно описує призначення блоку, а не його зовнішній вигляд чи стан. Іншими словами, ім’я має відповідати на питання: що це? (наприклад, хедер, меню тощо). Питання не повинен бути типу «як це виглядає» (наприклад, фіксований хедер, маленьке меню і т. д.).
Що таке елемент?
За методологією БЕМ елемент: «Складова частина блоку, яка не може використовуватися у відриві від нього.»
Принципи застосування елементів:
елементи живуть тільки в блоках;
елементи не можуть належати іншим елементам, вони можуть бути лише в блоках;
можна створювати вкладені елементи;
імена елементів описують їх призначення, а не зовнішній вигляд;
при іменуванні елементів необхідно дотримуватися стилю block__element.
Що таке модифікатор?
Модифікатор: «Сутність, що визначає зовнішній вигляд, стан або поведінку блоку або елемента.»
Наприклад, блок хедера може бути зафіксований у верхній частині сторінки, блок акордеона може відкриватися і закриватися, блок кнопки може бути відключений і т. д.
Спосіб іменування модифікаторів у БЕМ: block__element_modifier.
Це ядро методології БЕМ. Також БЕМ пропонує принципи організації структури файлів, набір інструментів і живе співтовариство з підтримкою.
Плюси БЕМ
У БЕМ є кілька переваг
нові розробники можуть швидко зрозуміти зв’язок між компонентами в розмітці і CSS;
методологія сприяє підвищенню продуктивності в команді. Переваги особливо помітні у великих проектах;
система іменування знижує ризики колізій з класами і витік стилів;
CSS несильно прив’язаний до розмітки у визначеному місці на сторінці;
CSS стає повторно.
SMACSS
Масштабована і модульна архітектура 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
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-коду? Як думаєте, методології можуть полегшити завдання? Пишіть в коментарях.
