БЕМ і підтримуваний CSS

33

Від автора: W3C CSS визначає як «простий механізм додавання стилів у веб-документ». З визначення випливає, що HTML документ повинен обробляти структуру і контент, те, що становить семантику документа. Однак останні пару років ми помічаємо підйом популярних фреймворків, прискорюють адаптивну розробку. Тепер побачити в HTML документі теги

цілком нормально. На самому початку я сказав, що CSS є механізмом додавання стилів, а HTML повинен обробляти структуру та вміст. Чи Можете ви сказати, що відбувається з HTML структурою? Структура тісно пов’язана з візуальним представленням контенту, що непрактично в довгостроковій перспективі. Обслуговування коду стане складним і дорогим.

Введення в БЕМ

Подумайте, скільки разів ви використовували ці CSS класи, щоб зробити HTML документ більш привабливим, ну або просто приємним для читання. Хіба HTML не повинен представляти значення структури контенту, який в ньому зберігається? Важливий col-md-12 у вашому документі з точки зору семантики? Відповідь, швидше за все, немає. Ось тут нам і допоможе БЕМ. Якщо ви не знаєте, що таке БЕМ, БЕМ методологія – це спосіб іменування класів в HTML і CSS. Технологія розроблена Yandex, і на сайті методології вони кажуть:

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

БЕМ повністю справляється зі своїм завданням. Існує ще кілька методологій типу SMACSS і OOCSS, але для мене БЕМ найдоступніша і найменш громіздка. Концепція легко засвоюється, а обслуговування CSS і HTML дуже просте, як в CSS препроцессорах.

Зазвичай при використанні якого-небудь адаптивного фреймворку типу Bootstrap ми отримуємо приблизно такий код:

Mi awesome website

This is my….

«>

А що робити, якщо б ви захотіли дізнатися, для чого потрібен кожен col-md-4? Якщо на інших сторінках у вас більше тегів з класами audio і video, і ви їх зраджували? Чи Можете ви змінити щось у великому коді, не боячись, що зміни торкнуться і інші сторінки, адже ви не знали, що ці класи використовуються десь ще? Ось тут нам і допоможе БЕМ, тепер HTML можна переписати в такий вигляд:

В HTML з’явилися класи типу content__item—video. Отримана структура і новий спосіб іменування класів дають пояснення про тегах в документі, що в них зберігається, а також як вони працюють з іншими частинами документа. Так будується семантика того, що ми хочемо представити за допомогою HTML. Тепер можна з упевненістю змінювати елементи з класом content__item—video. Стояти, це що, я втратив класи з Bootstrap типу col-md-4? Так, ви втрачаєте сітчастого макета та інших стилів CSS фреймворка. АЛЕ БЕЗ ПАНІКИ, якщо ви користуєтеся препроцесором, що майже завжди правда у великих проектах. Продовжуйте читати.

Підключаємо SASS і LESS

При використанні БЕМ дуже зручно працювати з CSS препроцессорами. В наш час в нормальному фреймворку є інструмент препроцессинга CSS. Часто використовуються мови SASS і LESS. Ці мови розширюють можливості методології БЕМ для підтримки більш організованого CSS, який потім можна розбити на окремі модулі. Крім того, препроцессоры дозволяють нам використовувати змінні, функції і міксини. БЕМ пропонує файлову структуру, однак вона необов’язкова, можна використати свою, якщо вона дотримується БЕМ принципи.

Якщо використовувати SCSS, то у файлі main.scss було б щось типу того:

@import ‘bootstrap’;
@import ‘lib/variables’;
@import ‘lib/mixins’;
@import ‘base/*’;
@import ‘components/*’;

Врахуйте, що в залежності від проекту і необхідностей файлова структура може бути більш вкладеної і спеціалізованої. Більш того, в Bootstrap є міксини для сіток та інші компоненти. Також з допомогою сторонніх бібліотек типу sass-globbing можна реалізувати imports зразок @import ‘base/*’. Так як ми працюємо з БЕМ, порядок завантаження файлів одного рівня не має значення. В рамках нашого прикладу у файлі components/homepage.scss може бути наступний код:

.header {
@include make-row;

&__title {

}
&__description {

}
}
.content {
@include make-row;
&__item {
@include make-md-column(4);
&—yellow {
background-color: yellow;
}
&—blue {
background-color: blue;
}
&—red {
background-color: red;
}
}
}

Тепер дійсно помітно, що HTML використовується для визначення структури та контенту. CSS використовується тільки для вираження візуальних деталей документа. Більш того, починаючи з SASS 3.3, щоб не писати довгі імена можна використовувати &__element. Імена по початку можуть бути досить довгими і громіздкими. Якщо строго слідувати методології іменування БЕМ, то в деяких ситуаціях можна отримати дуже довгі імена класів і селекторів. Людині буде набагато складніше розібратися в коді. На наше щастя, документи з великою вкладеністю, де довгі імена можуть викликати проблеми, зазвичай можна розбити на більш дрібні види (у великих проектах зазвичай використовуються движки видів, з допомогою яких можна розбивати види). Точно так само треба дуже обережно визначати незалежні елементи, так як це сильно допомагає при роботі з довгими іменами, і для цього не потрібні движки видів. Зрештою, коли ви побачите, наскільки легким і специфічним може бути БЕМ, а також як він виконує вашу роботу, ви самі захочете ним користуватися.

Наш досвід роботи з БЕМ

Не так давно ми працювали над редизайном сайту. Редизайн був повним, ми не працювали зі старим CSS і вирішили спробувати БЕМ. Проект був написаний на Ruby On Rails і використовував гем Bootstrap. На жаль, ми були прив’язані до Bootstrap 2 (поточна версія 3, версія 4 все ще альфа релізі), так як частина редизайн сайту не зачіпав, і вона повинна була працювати під управлінням Bootstrap 2. Нам потрібно було зберегти версію гема, і тим самим ми обмежували себе старою версією Bootstrap. В кінцевому рахунку ми мігрували на Bootstrap 3, але підтримка частин сайту зі старим і новим дизайном нікуди не поділася.

БЕМ допоміг нам зробити так, щоб HTML файли або наші види відповідали тільки за структуру і контент, що надавало семантику всіх видів. Види не мали нічого спільного з адаптивним фреймворком. А ось CSS файли описували візуальні стилі за допомогою розширення деяких класів фреймворку і за допомогою миксинов. У новому дизайні код CSS був повністю переписаний, проект був правильно організований, і ми точно знали, який файл на яку частину стилів додатки впливає. Загальні стилі були поміщені в папку base, в якій зберігалися файли, переписують стандартні HTML елементи. Ви можете сказати, що завдання селекторів полягає в стилізації декількох елементів, на відміну від специфічних селекторів у БЕМ. Досягти цієї мети і високого рівня повторного використання коду можна, комбінуючи стилі фреймворку і міксини, які потрібні в окремих стилях.

Під час редизайну сайту ми переглянули деякі вимоги до нового дизайну. У проектах завжди доводиться міняти деякі вимоги, і це можуть бути передумови до того, щоб розглянути гнучку методологію. Спочатку ми вирішили використовувати класи та стилі Bootstrap 2. У порівнянні з поточною версією функціонал був обмежений. У підсумку ми переросли Bootstrap 2 і зіткнулися зі складністю створення плавних інтерфейсів. Тому ми замінили класи сітки з bootstrap на flex блокові компоненти (є навіть фреймворк, який використовує flex блоки для створення сіток). Перехід був плавним, зміни не торкнулися HTML. CSS файли змінити не склало праці, так як повторно використовувані компоненти були в миксинах, які були перероблені в одну зміну, зачіпає різні стилі. Змінити стилі або вид також не викликало утруднень. На жаль, проект повинен був підтримувати IE 11, так як до сих пір безліч користувачів сидять на цьому браузері. В деяких випадках, де ми використовували flexbox, не було повної підтримки в IE11 і браузерах на iPhone.

Зрештою, ми мігрували на Bootstrap 3. І знову ми взагалі не чіпали HTML, так як зміни не торкнулися структуру, контент і семантику видів. Весь процес пройшов дуже швидко.

Висновок

БЕМ був ключовим інструментом в підтриманні обслуговування стилів у великому проекті. Однак БЕМ для розширення функціоналу може використовувати й інші інструменти та мови. Мови SASS і LESS дозволяють використовувати більш складні функції та файлову структуру, чого за замовчуванням в звичайному CSS немає. Використовуючи ці інструменти разом, ми отримуємо простий в обслуговуванні CSS, а також ми можемо з упевненістю вносити зміни у візуальну складову програми. Всі внесені зміни торкнуться тільки ті елементи, які і повинні змінитися (більше ніяких !important в CSS). HTML файли з видами описують структуру та вміст. В результаті ми отримали CSS код, який нам буде приємно підтримувати через пару років у великому проекті.