БЭМ или вёрстка независимыми блоками.

Для начала разберемся с тем, что такое «Блок»

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

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

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

Для этого хорошо подходит техника «вёрстка независимыми блоками».

При вёрстки блоками каждый обособленный элемент страницы описывается своими стилями (стили дублируются, а не объединяются в случае необходимости), которые в идеале не пересекаются со стилями других блоков. Блоки могут вкладываться в другие блоки.

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

Механизм независимых блоков использует минимум глобальных стилей, каждый обособленный элемент на странице описывается отдельным стилем. Эти стили дублируются и не обьединяются, а сами блоки могут вкладываться один в другой.
Для выполнения условий независимости используется «class» вместо «id»? каждый блок имеет префикс, а в таблице стилей нет классов вне блоков.

Опенсорс-платформа Яндекса → https://ru.bem.info/
Их библиотека 5.0 → https://ru.bem.info/platform/libs/bem-components/5.0.0/#supported-browsers

PS: В планах внедрить этот подход в Меркату.