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

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

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

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

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

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

Принципы БЭМ

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

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

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

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

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

Тематические статьи

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтенд-разработке никаких других языков не используется.

Статья опубликована в 2014 году
Чек-лист проверки фронтенда

По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.

Статья обновлена в 2024 году
Адаптивный и отзывчивый дизайн

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

Статья опубликована в 2019 году
HTML5 — новая версия стандарта

HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).

Статья опубликована в 2014 году
Принцип программирования YAGNI — «Вам это не понадобится»

Принцип заключается в том, что возможности, которые не описаны в требованиях к системе, просто не должны реализовываться. YAGNI основан на идее, что большинство «гипотетических» возможностей, которые кажутся полезными на этапе проектирования, никогда не будут востребованы. Реализуя их заранее, разработчики тратят время, усложняют код и повышают риск ошибок.

Статья обновлена в 2025 году
Алгоритмы поисковых систем: семантическая микроразметка

Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

Статья опубликована в 2014 году
Стандарты кодирования — залог хорошей сопровождаемости проекта

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

Статья обновлена в 2023 году