БЭМ и независимые блоки
Вёрстка независимыми блоками — это методология, которая была сформулирована разработчиками Яндекса. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Терминология
Блок — некоторая самостоятельная сущность, может быть простым или составным (то есть содержать в себе другие блоки).
Элемент — это составная часть блока, отвечающая за отдельную функцию; элемент может находиться только в составе блока.
Модификатор — это свойство блока или элемента, которое меняет их внешний вид или поведение.
Принципы БЭМ
Независимость блоков. Независимый блок реализован так, что его можно вставить в любое место на странице: то есть блоки в рамках БЭМ свободно перемещаемы и могут вкладываться друг в друга. В CSS для этого используются уникальные селекторы (классы) для именования блоков и элементов, не используются правила на основе названий тегов и минимизированы каскады. В плане JS это означает использование в качестве селекторов классов без каскадирования.
Повторяемость блоков. Методология БЭМ основана на том, что любой блок может встречаться на странице более одного раза. Это означает, что для стилевого оформления и для скриптов всегда используются классы, а не названия тегов и не идентификаторы.
Модифицируемость блоков и элементов. Внешний вид блока или элемента, а также их поведение могут быть переопределены при помощи модификаторов и одновременно для блока или элемента может использоваться несколько разных модификаторов. Модификаторы являются дополнительными CSS‑классами блока или элемента.
Предметная абстракция. При командной разработке должна использоваться единая терминология — это касается правил именования блоков, элементов и модификаторов.
Консистентность блока. Каждый блок должен знать всё о себе: разметка, стилевое оформление, поведение и используемые блоком ресурсы (изображения, например) должны быть собраны вместе, чтобы модификация блока была простой и удобной для разработчиков.
Тематические статьи
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
HTML — это язык для структурирования и представления содержимого. HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, утверждённая W3C и развивающаяся как живой стандарт. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Принцип заключается в том, что возможности, которые не описаны в требованиях к системе, просто не должны реализовываться. YAGNI основан на идее, что большинство «гипотетических» возможностей, которые кажутся полезными на этапе проектирования, никогда не будут востребованы. Реализуя их заранее, разработчики тратят время, усложняют код и повышают риск ошибок.
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют метаданные о содержании. Широко известными являются форматы Schema.org, Open Graph и микроформаты.
Любая командная разработка может быть эффективной только в том случае, если участники команды имеют общее видение. Если над проектом работает команда, а не один‑два разработчика, то обязательно должен быть стандарт оформления кода — набор правил и соглашений, которые описывают базовые принципы оформления программного кода, используемого совместно группой разработчиков.