• Портфолио
  • Смотреть портфолио списком
  • Создание сайтов
  • Контактная информация
  • БЭМ

    БЭМ – технология, разработанная Яндекс. Используется для структуризации css/js файлов, имеет стандарт именования классов.

    Достоинства:

    — при стилизации элемента обращение происходит только к одному селектору;
    — быстрее рендерится страница;
    — четкая структура файлов для css/js;
    — реиспользование кода в любых частях страницы;
    — понимание, к какому файлу стилей относится данный элемент;
    — разделение классов для стилизации и js;
    — не используется каскад стилей.

    Проблема при работе с БЭМ-версткой только в том, чтобы дать всем элементам на странице правильные названия и создать структуру файлов/папок.

    Соглашения:

    Страница содержит блоки и элементы.
    В БЭМ-подходе существует 5 разных реализаций организации файловой структуры.

    Мы выбрали следующую:

    Каждый блок в директории, элементы и модификаторы в файлах блока.

    Для каждого блока должна быть создана отдельная папка, в которой будут находится файлы со стилями и скриптами js, все папки должны лежать в папке /blocks.
    Например:

    /blocks
        /b-button
            btn.png
            b-button.css
            b-button.js
        /b-content
            b-content.css
        /b-foot
            b-foot.css
        /b-head
            b-head.css
            b-head.js
        /b-link
            b-link.css
        /b-table
            b-table.css
    

    Блок, при необходимости, можно, также, рассматривать как элемент.

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

    </pre>
    <div></div>
    <pre>
    

    Элементы вложенные в элементы не могут иметь такой класс ‘b-head-list__item__link’, правильно будет назвать так: ‘b-head-list__link’.
    Например:

    CSS
    Каждая БЭМ-сущность должна иметь класс, чтобы при необходимости изменить или дописать или переопредлить для них CSS-свойства.

    Опираясь на то, что любой блок, возможно, придется использовать повторно, т.е. блок не является уникальным, CSS-свойства для блоков и его елементов описываются только через классы.

    CSS-свойства не описываются через id, а именно вот так НЕ ПИШЕМ:

    #header {}

    CSS-классы для БЭМ-сущностей соответствуют полным именам этих сущностей.

    По возможности отказываемся от Селекторов типа. Селекторы типа — селекторы, которые применяются к DOM-узлам без CSS-класса (элементо-зависимые селекторы).

    Например, вот так НЕ ПИШЕМ:

    p {
        color: #ccc;
    }
    
    table.news td {
        border-bottom: 1px solid #ccc;
    }
    
    .list li {
        float: left;
    }
    

    Отказ от использования Селекторов типа и CSS-каскада уменьшает Reflow Time — чистое время наложения стилей на сформированный DOM.

    Правила именования блоков:
    Название блока начинается с ‘b- <название блока>’, слова разделяются с помощью тире ‘-’, например ‘b-head’, ‘b-head-list’.

    Правила именования элементов:
    Название элемента состоит из названия блока и названия элемента, разделенных двумя нижними подчеркиваниями ‘__’, если название элемента состоит из нескольких слов, оно также разделяется тире ‘-’.
    Например: ‘b-head__logo’, ‘b-head__logo-link’.

    Правила добавления и именования модификаторов:
    Блоки и элементы могут иметь свои модификаторы, если необходимо как-то визуально изменить его внешний вид или поведение (ширина, высота или размер шрифта и многое другое).

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

    Модификаторы добавляются путем создания нового класса для существующего элемента или блока, название разделяется одним нижним подчеркиванием ‘_’ и его название состоит из слов, разделенных одним нижним подчеркиванием ‘_’. Модификатор имеет имя и значение. Одновременно может использоваться несколько разных модификаторов.

    Полное имя модификатора блока создается по схеме: _имя-модификатора_значение-модификатора.

    Например: ‘b-head _size_middle _display_vert _display_horiz’.

    Правила добавление классов для js-скриптов:
    Поскольку классы для стилизации элемента и js-скриптов разделены, поэтому нужно добавлять дополнительный класс к элементу, при необходимости, если нужно выполнять с ним какие-либо действия при помощи js-скрипта.

    Название класса начинается с префикса ‘js-’, может состоять из нескольких слов, каждое из которых должно быть разделено символом тире ‘-’.

    Использование классов
    На одном DOM-узле может быть:

    — несколько блоков

    b-menu b-head-menu
    

    — блок и элемент этого же блока

    b-menu b-menu__layout
    

    — блок и элемент другого блока

    b-link b-menu__link
    

    — элемент одного блока и элемент другого блока

    b-menu__item b-head-menu__item
    

    — блок с модификатором и другой блок

    b-menu _layout_horiz b-head-menu
    

    Использование фоновых изображений
    Картинки, используемые на сайте, должны находится в той же папке, к блоку которой они относятся.

    Название изображения должно соответствовать названию сущности, к которой оно принадлежит.

    Правила именования такие же как для блока/элемента:

    b-имя-блока__имя-элемента

    Например:

    blocks/
        b-head/
            head.png
    

    Другие сущности
    Правила именования i-блоков

    i- (от include), название блока начинается с ‘i- <название блока>’, слова разделяются с помощью тире ‘-’, например ‘i-popup’, ‘i-buttons’.

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

    Или префикс блока, не имеющего визуального представления и реализующего какую-то функциональность.

    Блок ‘i-buttons’ не имеет конкретного визуального представления. Хранит в себе функциональность, на основе которой строится группа блоков ‘b-button_type_squre’.

    Почитать более подробно можно тут.