Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

Терминология

Блок — некоторая самостоятельная сущность, может быть простым или составным (то есть содержать в себе другие блоки).

Элемент — это составная часть блока, отвечающая за отдельную функцию, элемент может находиться только в составе блока.

Модификатор — это свойство блока или элемента, которое меняет их внешний вид или поведение.

Принципы БЭМ

Независимость блоков. Независимый блок реализован так, что его можно вставить в любое место на странице: то есть блоки в рамках БЭМ свободно перемещаемы и могут вкладываться друг в друга. В CSS для этого используются уникальные селекторы (классы) для именования блоков и элементов, не используются правила на основе названий тегов и минимизированы каскады. В плане JS это означает использование в качестве селекторов классов без каскадирования.

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

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

Предметная абстракция. При командной разработке должна использоваться единая терминология, это касается правил именования блоков, элементов и модификаторов.

Консистентность блока. Каждый блок должен знать всё о себе: разметка, стилевое оформление, поведение и используемые блоком ресурсы (изображения, например) должны быть собраны вместе, чтобы модификация блока была простой и удобной для разработчиков.

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб-приложения для выявления и последующего исправления ошибок или недочётов.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML-разметки, а без этого скорость загрузки и отрисовки будет ниже.
Ускоряем работу сайта за счёт оптимизации CSS
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.

Тематические технологии:

Язык разметки HTML
CSS — каскадные таблицы стилей
Система сборки WebPack
SASS
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree