Начало работы с соглашениями об именах БЭМ и именами общих классов CSS

внешний интерфейс Element CSS
Начало работы с соглашениями об именах БЭМ и именами общих классов CSS

Зачем нужен БЭМ

Если вы единственный, кто пишет код CSS проекта, или код CSS проекта небольшой, вы можете организовать свой код CSS так, как вам нравится и к чему вы привыкли. Тем не менее, проект больше и сложнее, и многие люди пишут код CSS проекта (у каждого свой стиль) Когда объем кода большой, необходима унифицированная форма для организации кода CSS. , БЭМ пригодится. .

Что такое БЭМ

BEM (Block Element Modifier) — это шаблон для именования классов CSS. Использование этого шаблона может сделать код CSS более удобным для сопровождения. Стандартная запись БЭМ.block-name__element-name--modifier-name.

Block

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

Он может быть назван буквами, цифрами и дефисами, и любой элемент html может стать блоком, независимым от других блоков или элементов на странице.

<header class="header"></header>

.header {
  color: #333;
  background: #f5f5f5;
}

Element

Является частью блока, любой элемент внутри него связан с блоком и не может использоваться вне блока.

<article class="article">
  <h2 class="article__title"></h2>
  <p class="article__content"></p>
</article>

.article {
  padding: 12px;
}

.article__title {
  font-size: 1rem;
}

.article__content {
   font-size: .9rem;
}

Modifier

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

<button class="btn btn--disabled"></button>

.btn {
  color:  #333;
  background-color: #fff;
}

.btn--disabled {
  color: #fff;
  background-color: #6c757d;
}

Пример

Такая карта представляет собой отдельный блок

<div class="list-card">
  <img class="list-card__img" />
  <div class="list-card__content">
    <a class="list-card__link"></a>
    <p class="list-card__desc"></p>
    <div class="list-card__stats">
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__date"></span>
    </div>
  </div>
</div>

See the Pen BEM Demoпо быстрому коду (@xrr2016) on CodePen.

Общие имена классов CSS

Класс упаковки: container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block

Класс статуса: primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading

Класс размера: large, middle, small, bigger, smaller

Класс компонента: card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

Класс местоположения: first, last, current, prev, next, forward, back

Текстовый класс:название, описание, содержание, дата, автор, категория, метка, тег

Класс персонажа: avatar, name, age, post, intro

Эпилог

БЭМ не требуется, вы все равно можете выбрать способ написания и организации своего CSS-кода. Основная цель использования БЭМ — иметь единую спецификацию при командной разработке, которая более удобна для обслуживания кода и позволяет быстрее понять код, когда другие берут ваш код или другой код.

Ссылаться на

Get BEM

BEM

БЭМ-мышление досконально понимает синтаксис БЭМ

Какого черта, я не знаю, как назвать класс

Категории