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