Недавно хабраузер Мирантус написал статью «Как оформить веб-страницу» , в котором он рассказал о том, как создать веб-страницу.
В его статье подробно обсуждалось, как выбирать отдельные элементы из заданного шаблона, подбирать шрифты и т. д. Однако его подход к написанию реальной веб-страницы мне показался не очень удачным, о чем я писал в Комментарии .
В этой статье я хочу поговорить о том, как можно «хорошо» верстать (хотя бы структурировано;), и в то же время рассказать о методологии, которая может «облегчить жизнь» при верстке.
Структура поста будет следующая:
- БЭМ
- Собственно пример - как оформить страницу
БЭМ
БЭМ (Блок, Элемент, Модификатор) — методика, разработанная внутри Яндекса, предлагает следующую концепцию (если описать ее в 1-2 предложениях): Любая веб-страница представляет собой набор блоков, состоящих из элементов, причем элемент может быть другим блоком (так у нас получается вложенность).При необходимости мы можем изменить «стандартное» отображение блока/элемента, добавив к нему модификатор.
Сайт методологии: ru.bem.info Очень хорошее «руководство к действию» можно найти здесь: ru.bem.info/method/definitions Предлагаю определить основные элементы: Блок — это часть страницы, логически независимая от остального контента.
Представляет собой «строительную единицу» сайта (на примере конструктора Лего это отдельный «кирпичик») Блок не несет ответственности за свое местоположение.
Он задает внутренние свойства (размеры, шрифты и т. д.) Внутри блока содержатся элементы.
Элемент — это часть блока, отвечающая за отдельную задачу (например, это локация внутри блока).
Элемент должен быть частью блока и не должен иметь никакого значения отдельно от блока.
Пример выделения блоков\элементов
Для примера возьмем блок «прямой эфир» на сайте Хабра: Вот как это выглядит:
Если «организовать» ее по методологии БЭМ, то эта часть будет представлять собой блок, состоящий из элементов:
Соответственно, этот блок состоит из 3-х разных типов элементов.
(Здесь стоит оговориться, что возможна верстка с использованием только 1 типа элемента (который будет описывать только поля)).
Элементы, выделенные розовым, содержат внутри себя еще один блок, назовем его «пост».
Соответственно, давайте посмотрим, из чего состоит блок-пост: 
Таким образом, блок «пост» состоит из 5 элементов.
В этом примере мы рассмотрели, как можно строить блоки по методологии BЭM (стоит сказать, что аналогичным образом можно строить любой уровень вложенности).
Теперь давайте посмотрим на третий компонент БЭМ – модификатор.
Модификатор может задать как дополнительное поведение для блока/элемента, так и переопределить стандартное.
Самый яркий пример для понимания «модификатора» — пример с кнопками.
Предположим, что в проекте используются такие кнопки, как: 
Такая кнопка имеет отступы слева и справа, шрифт и цвет фона.
Соответственно, мы представляем кнопку как .
button и добавляем к ней эти свойства.
Теперь на некоторых страницах в проект нужно добавить такие же кнопки, но, скажем, с фоновым цветом: red; Вы можете решить эту проблему с помощью BЭM очень просто: Создайте модификатор для блока: .
button_red, для которого добавьте указанное свойство.
Готовый! В проекте появились красные кнопки с другим внешним видом.
Более того, нам не нужно было создавать новые сущности.
Описание стиля БЭМ
BЭM не объявляет «специальный» стиль описания классов.Однако де-факто используется следующий стиль: 1) Несколько слов в одном имени разделяются дефисом (например, блок главной страницы или мой-супер-главный-список) 2) элементы отделяются от блоков двумя подчеркиваниями "__" (например, main-page__header или my-super-main-list__item) 3) Модификаторы разделяются одним подчеркиванием "_" (например, main-page__header_strong или my-super-main-list_blue).
Префиксы
Иногда проект содержит префиксы.Они позволяют разработчику точно определить, какую логическую нагрузку несет тот или иной класс.
Например: g- (глобальный) префикс для глобальных классов.
(Например, чтобы установить для невидимых элементов статус «g-скрытый».
) b- (блок) префикс для выделения элементов, связанных со структурой документа.
js- (JavaScript) префикс для выделения элементов для селекторов js.
Макет страницы
Макет страницы обрабатывается блоком, который, например, можно задать для тела.Соответственно, элементы этого блока описывают расположение остальных блоков на веб-странице.
Почему использовать каскад плохо?
У людей, впервые открывших БЭМ, может возникнуть вопрос: почему элементы описаны в таких длинных цепочках? не проще ли: .Главная страница .
main-page .
header и т. д. Этот метод проще написать, но, к сожалению, он может нарушить независимость блоков.
Пример: у нас есть следующая структура:
Теги: #HTML #макет #bam #bam #CSS #HTML.main-page
-
Использование Файла Подкачки Вместо Раздела
19 Oct, 24 -
Редакции Windows Server 2012 И Цены
19 Oct, 24 -
Рбк Деньги - Неприятные Новости
19 Oct, 24
