Узнайте, как писать более чистый CSS-код, приняв самое популярное соглашение об именовании в CSS.
В разработке программного обеспечения одной из наиболее важных характеристик чистого кода является его ремонтопригодность.
Сама по себе удобство сопровождения кода зависит от нескольких факторов. Когда часть программного обеспечения является читаемой, ясной, краткой и, самое главное, безжалостно последовательной, она автоматически становится более интуитивно понятной в обслуживании.
Перефразируя популярную цитату…
Плохой код похож на шутку. Которую нужно объяснять, если нужно её объяснять дважды то, вероятно, это плохая шутка.
Имея это в виду, как мы можем сделать наш CSS-код более удобным в обслуживании?
Надежный подход заключается в принятии руководства по стилю, (...иногда я вставляю ссылки на нужную литературу и к сожалению не всегда нахожу информацию в русском пространстве интернета, по этому есть много полезного на англоязычных сайтах, для тех кто ещё плохо знает English, пожалуйста пользуйтесь переводчиками, я когда то тоже так делал) фреймворка кодирования, шаблона или архитектуры и применении его с безжалостной последовательностью по всему проекту.
В CSS есть несколько руководств по стилю. В этой статье мы сосредоточимся на самом популярном соглашении об именовании в CSS — соглашение об именовании BEM.
Каково соглашение об именовании BEM
Соглашение об именовании BEM обозначает блок, элемент и модификатор.
Возможно, вы столкнулись с этим, не зная. Если вы относитесь к тому типу людей, которые проверяют шаблоны из Envato (или вашего любимого web template hub), вы бы наткнулись на классы CSS и идентификаторы с такими именами, как .button--primary , .button__title , #pinnedBlogPost__title, .is--bold . Что ж, таково соглашение об именовании BEM.
Чтобы проникнуться идеей соглашения BEM, мы можем представить разные города в соответствующих странах, на нескольких континентах мира. Например, Лондон находится в Соединенном Королевстве; Соединенное Королевство находится в Европе. В этом отношении мы можем сказать, что Europe__United Kingdom-Лондон.
Давайте разберем это подробнее.
Блок
Как мы видели в примере выше, первая часть представляет контейнер высокого уровня. Это может быть что угодно, начиная от меню навигации, контейнера для записей в блоге, формы входа в систему и заканчивая чем-то более простым, например кнопкой. Хорошими примерами являются: .card, .blog, .post.
Они необязательно имеют префиксы пространств имен (о которых мы поговорим позже в этой статье)
Элемент
Внутри блока находится следующий компонент соглашения BEM. Отдельная единица в контейнере - это элемент. Это может быть заголовок карточки блога, текст кнопки, ссылки в меню навигации. Обычно перед ними ставятся два символа подчеркивания. Примеры включают: .card__title, .nav__link, .nav__item, #userProfile__name.
Модификатор
Последняя часть представляет состояние или вариацию, в которую элемент, вероятно, преобразуется — жирный, большой, маленький, подчеркнутый и т.д. Обычно они предваряются двумя тире и выглядят следующим образом: .card__title-полужирный, .is-жирный, .is-подчеркнутый.
Благодаря вышеупомянутому соглашению, реализованному в нашей базе кода CSS, мы используем преимущества:
- Улучшенный стандарт кодирования
- Простота чтения
- Улучшенная ремонтопригодность
- Улучшенная структура
- Больше кода для повторного использования
Пространства имен
Наконец, мы собираемся поговорить о концепции ad-hoc в Чтобы придать области видимости классам в нашем CSS-коде, мы можем ввести специальные префиксы к их именам.
- c-: Component c-card__заголовок,c-card-большой
- is-: Утилита имеет-, является-большой, имеет-slideAnimation
- js-: Действия, js-запуск, js-выход
- o-: Объект , o-контейнер, o-контейнер-жидкость
- qa-: Тестирование qa-ошибка, qa-скрыть
- s-: Scope , s-баннер, s-jumbotron
- t-: Тема t-темная, t-светлая
- u-: Утилита u-clearfix,u-align-center
Вы нашли эту статью полезной? Получайте ежедневные статьи и рекомендации по кодированию, подписавшись на мой канал. Спасибо!