Как правильно писать классы в css

Как называть css-классы

При написании CSS кода часто возникает вопрос — какие названия давать классам элементов. Зачастую, это может занимать достаточно времени, ведь правильное именование классов css позволит не запутаться в коде и эффективней с ним работать. Ведь кому хочется потом изменять названия классов по несколько раз. Об этом и пойдет речь в данной статье — как назвать css-классы.

Называть классы по содержимому

Давать названия классам можно исходят из содержимого HTML-элементов, для которых эти классы будут использоваться. Например, если это класс для меню в нижней части сайта, то ему можно дать название класса .footer-menu. По такому имени уже ясно, что этот класс используется для оформления меню футера.

Разделять классы через тире

Если в именах классов несколько слов, то для удобного чтения разделяйте эти слова через тире, как например, было в предыдущем примере с классом для меню в нижней части сайта: .footer-menu. При этом, не используйте для нескольких слов верблюжий стиль (CamelCase), так как это будет затруднять чтение слов и может запутать.

Количество слов в названии класса

Нужно придерживаться как можно меньшему количеству слов для имени класса. Максимум 3-4 слова для именования. Больше количество будет трудно поддерживать.

Префикс в именах классов

Давайте именам классов префиксы — в самом начале названия названия, которые по смыслу подходят для определения зачем используется элемент. Например, для классов, которые используются JavaScript, можно давать префиксы .js-, тем самым давая понять, что такие классы используют скрипты и их не следует удалять у элементов. Для элементов, которые используются в посте блога, можно задать префикс .blog- и в следующий раз в файле css нам уже понятно, что классы используются для оформления элементов блога. Для элементов, которые определяют состояние элемента — его наличие или активность, используйте префиксы has- или is-.

Возможно, вы как-то по другому называете классы элементов. Ждем от вас комментариев!

Автор

Программист с образованием в области IT и опытом разработки на разных языках. Автор статей по программированию. Общий опыт работы в сфере IT и интернета более 5 лет.

Простые правила разметки

БЭМ расшифровывается как «Блок Элемент Модификатор». На самом деле, это целый стэк технологий, из которого мы воспользуемся только соглашением по именованию классов.

  • БЭМ позволяет создавать абсолютно независимые блоки. Блоки и элементы получают уникальные имена, так что стили для одного элемента ничего не поломают в другом.
  • БЭМ помогает легко придумывать любое количество классов, не повторяющихся между собой.
  • БЭМ помогает писать самодокументирующийся код, в классе любого элемента содержится информация о нём.

Подробнее можно почитать в разделах Быстрый старт и Часто задаваемые вопросы на сайте bem.info.

Ниже показаны примеры кода.

Простой пример: Блок + Элемент #

Допустим, у вас есть блок с заголовком, текстом и кнопкой внутри, например, это всплывающее окно — попап. Разметка:

Добавляем класс содержащий назначение элемента: .popup :

Теперь попробуем добавить классы вложенным элементам:

Классы удобные, но не уникальные. Если на странице будут ещё элементы с классами .title и .text , их стили могут затронуть элементы в попапе. Селектор типа .popup .title может в будущем создать проблемы со специфичностью. Можно придумать другие классы, но чем больше похожих по смыслу элементов, тем сложнее придумывать новые классы.

А теперь применим БЭМ-нотацию: каждому элементу внутри блока добавим префикс с классом родителя, например, для заголовка это будет popup__title :

Теперь эти классы легко решают сразу две задачи: во-первых, благодаря уникальным классам стили для них никогда не пересекутся с другими подобными элементами на странице, а во-вторых, по таким классам сразу видно, что это элементы блока .popup .

Пример посложнее: Блок + Элемент + Модификатор #

Для примера возьмём сервисное сообщение на сайте. Обычно такие сообщения бывают разных видов, например, сообщение об успешном завершении действия или об ошибке.

Логично использовать одну и ту же разметку, но с разными цветовыми темами. Именно здесь очень пригодятся модификаторы.

Обоим элементам можно добавить одинаковые стили используя общий класс .message и так же легко можно добавить отдельные стили для каждого из них, используя уникальный класс с модификатором:

Оба сообщения будут иметь рамку толщиной один пиксель, но для сообщения об успешной операции она будет зелёной, а для сообщения об ошибке — красной.

Ещё сложнее: что делать, если хочется сделать элемент элемента? #

Например, на странице есть блок новостей:

Заголовок блока логично получает класс .news__title , список — .news__list , а отдельная новость — .news__item :

Тут никаких проблем возникнуть не должно. Теперь добавим разметку отдельной новости:

Нам нужно добавить класс заголовку новости. Первым делом приходит в голову .news__title , но такой класс уже занят. Предположим, что второй элемент будет не .title , а .subject , тогда в CSS получается такое:

Без дополнительных комментариев будет совершенно невозможно понять какой из них является заголовком всего блока, а какой — отдельной новости. Не пойдёт.

Следующий вариант — .news__item__title , но в БЭМ нельзя создавать элемент элемента, и это понятно, потому что получается каша. Ещё вариант: .news__item-title — тоже не годится, потому что может быть неочевидным как title соотносится с item . Как же быть?

Решение простое: на уровне элемента .news__item можно объявить новый блок (например, .news-item ), и строить вложенные классы уже от него. Да, это не самостоятельный переиспользуемый блок, здесь объявление блока нужно только для того, чтобы разгрузить селекторы. Что получается:

Проблема решена: нам больше не нужно использовать монструозные классы, при этом класс точно описывает элемент, и в CSS будет сразу понятно какой класс за что отвечает:

Множественные классы

Давайте закрепим приём стилизации с помощью множественных классов, который мы уже использовали в первой части стартового тренажёра. Чтобы вспомнить этот приём, разберём небольшой пример. Допустим, у вас на сайте есть разные типы уведомлений:

У них все стили кроме фона одинаковые. Фон обычных сообщений серый, фон ошибок красный. Стили для этих уведомлений можно организовать так:

Класс alert с общими стилями есть у всех сообщений. Класс alert-error с частными стилями есть только у ошибок. Помните: несколько классов в атрибуте class задаются через пробел.

Почему код лучше организовать именно так? Мы уже знаем, как работает каскад в CSS, поэтому ответить будет легко.

Использование нескольких классов в разметке помогает явно указать, какие стили будут смешиваться с помощью каскада. И, конечно, эти стили удобнее всего разместить в коде рядом друг с другом.

Использование однотипных селекторов (например, по классам) позволяет использовать самый простой механизм разрешения конфликтов — по порядку в коде. Размещаем частные CSS-правила после общего, и всё что нужно точно переопределится.

А теперь уже с полным пониманием происходящего давайте улучшим блок навыков: сделаем шкалу с высоким процентом зелёной. Для этого в разметку добавим ещё один класс, а в стили — CSS-правило для этого класса, причём после общего CSS-правила.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *