На кожному розробка веб-додатків, над якими працює команда або кілька розробників по черзі, чи підтримуються вони додатки чи нові проекти, кожен із цих розробників залишає в цьому свій стиль написання HTML a CSS код. Для невеликих веб-сайтів обслуговування коду - не така вже й велика проблема. Однак, якщо ми розглянемо великі програми, дуже важлива організація, уніфікація стилю та оптимізація коду HTML та CSS.

Існує багато конвенцій про іменування, які намагаються встановити правила для програмістів під час написання коду для будь-якої програми. Незалежно від того, яку методологію ви вибрали для свого проекту, ви будете використовувати її протягом усього часу її створення та обслуговування. переваги більш структурованих CSS та UI. Деякі домовленості є більш гнучкими, інші дуже суворими, деякі легші для розуміння та адаптації, інші складні.

Але яка на це моя відповідь, який вибрати? BEM.

Модифікатор блочного елемента методологія (скорочено як BEM) є дуже популярним, конвенція про іменування, що використовується в HTML та CSS. Головною метою цієї конвенції є створити також Класи CSS, які є однозначний і для розробників найбільш інформативні. Він може це зробити краще і швидше зрозуміти взаємозв'язок між HTML і CSS в даному проекті (часто на перший погляд).

Для порівняння класу CSS, який пишеться різними способами:

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

Але як це виглядає в BEM?

Блок є найвищою абстракцією нового компонента, наприклад меню:

. Цей блок слід вважати батьківським. Його "діти", або елементи розміщуються після імені блоку та розділяються двома підкресленнями

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

Наші визначення реєстрація цього Класи CSS нам тоді забезпечує на перший погляд інформація про роботу з елементом у блоці "меню" що називається “Предмет” і він має свій модифікатор “Видимий”.

Основні правила написання в BEM в балах:

  • Заняття пишуться малими латинськими літерами. Вони можуть містити дефіс (розділення слів) або цифру.
  • Імена блоків визначають простори імен для його елементів та модифікаторів
  • Імена елементів відокремлюються від блоку два підкреслення __
  • Модифікатори відокремлені від блоку або елемента дві риски ––

додати

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

Реальний, більш складний приклад (хоча, можливо, не через BEM!) Плагін Jquery photoSwipe: