https://www.youtube.com/playlist?list=PLQJNT2fdCJngOj0mGZaTcZRyfSBTCWHe1

https://ru.wikipedia.org/wiki/БЭМ

https://ru.bem.info/methodology/naming-convention/

 

 

 многословность классов = уникальность элементов

 

• имя-блока_имя-модификатора;

• имя-блока__имя-элемента_имя-модификатора.

 

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Создавайте блок

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

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

 

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

 

 

Файловая структура

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

Особенности:

• Один блок — одна директория.

• Имена блока и его директории совпадают. Например, блок header — директория header/, блок menu — директория menu/.

• Реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.

• Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.

• Имена директорий элементов начинаются с двойного подчеркивания (__). Например, header/__logo/, menu/__item/.

• Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Например, header/_fixed/, menu/_theme_islands/.

• Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например, header__input.js, header_theme_islands.css.

Пример

search-form/                           # Директория блока search-form

    __input/                           # Поддиректория элемента search-form__input
        search-form__input.css         # Реализация элемента search-form__input
                                       # в технологии CSS
        search-form__input.js          # Реализация элемента search-form__input
                                       # в технологии JavaScript

    __button/                          # Поддиректория элемента search-form__button
        search-form__button.css
        search-form__button.js

    _theme/                            # Поддиректория модификатора
                                       # search-form_theme
        search-form_theme_islands.css  # Реализация блока search-form, имеющего
                                       # модификатор theme со значением islands
                                       # в технологии CSS
        search-form_theme_lite.css     # Реализация блока search-form, имеющего
                                       # модификатор theme со значением lite
                                       # в технологии CSS

    search-form.css                    # Реализация блока search-form
                                       # в технологии CSS
    search-form.js                     # Реализация блока search-form
                                       # в технологии JavaScript

Такая файловая структура позволяет легко поддерживать и повторно использовать код.

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

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

• Flat

• Flex