Какво е BEM / Methodology?

getbem.com

BEM (Block, Element, Modifier) е подход за web разработка с цел всички компоненти да бъдат разделени
на блокове така, че да могат да бъдат преизползвани в следващи проекти просто с копиране. Когато използваме BEM 
методът на писане css кодът трябва да съдържа само класове, без ID-та или name атрибути.

Block:
Блоковете са css класове които държат едно цяло. Например:
<!-- `header` block -->
<header class="header">
    <!-- Nested `logo` block -->
    <div class="logo"></div>

    <!-- Nested `search-form` block -->
    <form class="search-form"></form>
</header>
Тук имаме .header блок, .logo блок и .search-form блок. Всяко едно цяло парче html е блок.

Emelent:
Елементите са части от блока. Например ако имаме форма за търсене, тя е един цял блок, а елементите 
в нея са input полетата.
<!-- `search-form` block -->
<form class="search-form">
    <!-- `input` element in the `search-form` block -->
    <input class="search-form__input">

    <!-- `button` element in the `search-form` block -->
    <button class="search-form__button">Search</button>
</form>
.search-form__input е елемент на блока .search-form
Всеки клас на elementa трябва да започва със името на блока последвано от долна черта с продължение на елемента.

Modifiers:
Това са класове които определят състояние, външен вид или поведение на един блок или елемент.
Името на модификатора трябва да описва външния му вид - "Какъв размер?" или "Коя тема?" и така нататък
- size_s или theme_islands) ,неговото състояние ("По какво е различен от дургите?" - disabled, focused)
и неговото поведение ("Как се държат?" или "Как се реагира на потребителя?" - като directions_left-top).
Името на модификатора се отделя от блока или елемента с една долна черта_:

    .block-name_modifier-name
    .block-name__element-name_modifier-name
    
Пример:
<!-- The `search-form` block has the `focused` Boolean modifier -->
<form class="search-form search-form_focused">
    <input class="search-form__input">

    <!-- The `button` element has the `disabled` Boolean modifier -->
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

Модификаторите трябва да са с име и стойност като следващия пример:
.block-name_modifier-name_modifier-value

Модификаторите не могат да бъдат използвани сами. Пред тях трябва да е класа на блока или елемента в зависимост от това
къде ги слагаме.

Файлова структора на BEM:
Файловата структора е такава, че можем да преизползваме всеки един блок без да е неубходимо да търсим определения
css/js за него. Всяка директория е различен блок с всичко неубходимо в него за да работи.
- Всеки блок е отделна директория
- Блока и директорията трябва да имат едно и също име. Например блок header е в директория header
- Неубходимите файлове за блок header са със същото име като блока, header.css, header.js
- Блок директорията е root директория на директорийте за елементите и модификаторите
- Всяко име на елемент директория започва с две долни черти __
- Всяко име на модификатор директория започва с една долна черта _  : header/_fixed/ или menu/_theme_islands/

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

Добро обяснение:
https://en.bem.info/methodology/