Школа 02.01.2022

Основы CSS и методологии

1. Введение в CSS

На первом уроке мы с вами узнали, что для описания содержимого веб страницы используется язык гипертекстовой разметки HTML. А для того, чтобы определить, как страница будет выглядеть, задать необходимые цвета, шрифты, фоновые изображения, отступы, границы, различные эффекты и многое другое, нам понадобятся “Каскадные таблицы стилей” (Cascading Style Sheets) или просто CSS.

Таблицы стилей

Таблицы стилей бывают двух видов:

Внутренние — вся стилевая информация располагается внутри самой веб-страницы в специальном теге <style>, который в свою очередь должен находиться внутри тега <head> в шапке страницы.
Внешние — стилевая информация располагается в отдельном файле, который подключается к странице.

Пример внутренних стилей, заданных на странице:

<!DOCTYPE html>
<html>
  <head>
    <title>Название документа (страницы)</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок страницы</h1>
    <p>Параграф текста</p>
  </body>
</html>

В браузере мы увидим следующую картину:

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

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

Самым распространенным методом подключения внешней таблицы стилей является использование тега <link> в шапке страницы внутри тега <head>.

Элемент <link> определяет отношения между текущим документом и внешним ресурсом.

<head>
  <title>Название документа (страницы)</title>
  <link rel="stylesheet" href="styles/styles.css">
</head>

Правило @import

В таблицу стилей, как внешнюю, так и внутреннюю можно подключить внешний файл CSS с помощью правила @import:

@import url("fonts.css");
h1 {
  color: red;
}

Правило @import должно предшествовать всем другим видам правил, за исключением правила @charset (задает кодировку символов, используемую в таблице стилей).

Но здесь стоит отметить, что использование правила @import внутри внешних css-файлов стоит избегать, так препятствует параллельной загрузке стилей, поэтому с точки зрения производительности дополнительный тег <link> имеет явное преимущество.

2. CSS-правила и селекторы

CSS-правила

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

Как мы уже могли заметить выше, каждое CSS-правило состоит из двух частей, селектора и блока объявлений.

Селектор — это элемент веб страницы, который непосредственно подлежит форматированию браузером.

Блок объявлений — это код, расположенный за селектором и заключенный в фигурные скобки. Он содержит объявления, состоящие из CSS-свойств, применяемых к данному селектору и их значения.

В общем виде CSS-правило выглядит так:

селектор {
  свойство-1: значение;
  свойство-2: значение;
}

Селекторы и комбинаторы

Чтобы задать стили для какого-либо элемента, сначала мы должны указать его с помощью селектора.

Сделать это можно следующими способами:

`универсальный`	`* {}`	`выбирает все элементы`
`по тегу`	`p {}`	`<p>Текст</p>`
`по классу`	`.about {}`	`<p class="about">Текст</p>`
`по id`	`#description {}`	`<p id="description">Текст</p>`
`по атрибуту`	`[title]`	`<p title="Описание">Текст</p>`

Селекторы могут быть составными:

p.about {}

p#description {}

В примере выше мы выбрали все элементы <p> с классом about и элемент <p> c идентификатором description.

Идентификатор по тегу всегда должен идти первым, т.к. не имеет специального знака в начале.

Для объединения различных селекторов существуют комбинаторы:

1. комбинатор потомков (пробел) — выбирает элементы, которые находятся внутри указанного элемента вне зависимости от уровня вложенности:

section .about {}

Такой селектор выберет все элементы с классом about, которые находятся внутри элемента <section>.

2. комбинатор дочерний (>) — выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу и находятся на первом уровне вложенности:

section>.about {}

Такой селектор выберет только дочерние элементы с классом about, расположенные непосредственно внутри элемента <section> на первом уровне вложенности.

3. комбинатор следующего соседнего элемента (+) — выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

.about+.description {}

Такой селектор выбирает первый элемент с классом description, расположенный непосредственно после элемента с классом about.

4. комбинатор общий родственный (~) — выбирает все элементы, которые находятся непосредственно после указанного элемента на этом же уровне вложенности, с тем же родителем.

.about~.description {}

Такой селектор выбирает все элементы с классом description, расположенные непосредственно после элемента с классом about.

Если разные элементы имеют схожие стили, то их можно объединять, перечисляя через запятую:

.title,
.about-title {
  color: red;
}

CSS-свойства и значения

CSS-свойства определяют то, как будет выглядеть и вести себя элемент на странице. Они отвечают за:

позиционирование;
размеры и отступы;
рамки и фоны;
оформление текста;
анимации и различные эффекты;
и многое другое.

CSS-свойств очень много, с ними мы будем знакомиться постепенно в рамках курса.

Каждое CSS-свойство имеет свои допустимые значения.

Они могут быть:

цифровыми: абсолютными и относительными:

{
  height: 50px;
  width: 50%;
}

собственными ключевыми словами:

{
  display: block;
  text-transform: uppercase;
  text-align: center;
}

общими ключевыми словами: inherit, initial, unset, revert:

{
  display: initial;
  color: inherit;
}

произвольной строкой:

{
  font-family: Arial, sans serif;
  content: "Tooltip"
}

Задание 1: В каталоге с учебным проектом создайте новый каталог styles, а внутри него файл styles.css, который в свою очередь подключите в index.html. Пропишите в styles.css css-правило для заголовка <h1>, состоящее из одного свойства color и значения red. Посмотрите результат в браузере.

Наследование

Наследование — это механизм передачи CSS-свойств от предка к его потомкам. Соответственно, все CSS-свойства делятся на наследуемые и ненаследуемые.

К наследуемым относятся в первую очередь свойства, определяющие параметры отображения текста, например:

font-size,
font-family,
font-style,
font-weight,
color,
line-height,
letter-spacing,
text-align,
text-transform,
word-spacing.

Также к наследуемым относятся:

border-collapse,
cursor,
list-style,
visibility
и некоторые другие.

Это очень удобно, так как мы можем, например, один раз задать цвет текста, который получат все вложенные элементы и больше не думать об этом свойстве.

С помощью ключевого слова inherit можно наследовать любое значение свойства родительского элемента, даже если оно не наследуются по умолчанию.

3. Единицы измерения

Указывать размеры в CSS можно в самых разных единицах. Разберём самые важные и актуальные из них.

Пиксель (px)

Пиксель в CSS – это базовая абсолютная величина, которая соответствует единице вьюпорта вашего экрана, или же его физическому пикселю, если device pixel ratio — отношение разрешения в физических пикселях к разрешению в логических CSS пикселях — равно единице. Подробнее об этом поговорим на следующих уроках.

Проще говоря, если ширина вьюпорта экрана составляет 1920 пикселей, то для того, чтобы получить элемент шириной в половину экрана, мы должны ему задать

{
  width: 960px;
}

При этом размер вьюпорта самого браузера значения не имеет, и если мы сожмём окно браузера, размер элемента от этого не изменится.
Пиксели могут быть дробными, например 32.5px, это абсолютно нормально.

Проценты %

Размеры свойства элемента в процентах как правило рассчитываются относительно такого же свойства родителя. Но в определённых ситуациях такие размеры могут высчитываться иначе. В дальнейшем мы ещё столкнёмся с таким поведением. В общем случае, к примеру, если ширина родителя составляет 960px, то, задав дочернему элементу ширину 50%, мы получим 480px.

em

Em высчитывается относительно текущего размера шрифта родителя. К примеру, если родительский элемент имеет размер шрифта 64px, то, указав дочернему элементу 0.5em, фактически мы получим 32px. При этом стоит помнить, что размер шрифта наследуется.

rem

Единица rem похожа на em, но расчёт ведётся всегда относительно размера шрифта корневого элемента <html>. Эта единица хороша тем, что позволяет контролировать размеры свойств элементов всей веб-страницы путём изменения одного единственного значения.

Самый очевидный пример применения — режим отображения для слабовидящих: задав один раз все шрифты в em, у нас больше нет необходимости точечно прописывать все размеры, достаточно указать нужный размер шрифта корневому элемента и затем менять его при необходимости.

vw, vh, vmin, vmax

vw – 1% ширины окна;
vh – 1% высоты окна;
vmin – наименьшее из (vw, vh);
vmax – наибольшее из (vw, vh).

В отличие от пикселей данные единицы напрямую зависят от вьюпорта браузера, и размеры, указанные в них, автоматически масштабируются при изменении размеров окна.

Есть и другие единицы измерения CSS, но они или уже окончательно устарели, или применяются крайне редко, а их использование не имеет особого смысла.

4. Каскад и специфичность

К одному и тому же элементу могут применяться несколько CSS-правил. Кроме того каждый элемент может иметь несколько классов, указанных через пробел:

<h1 class="title page-title">Заголовок страницы</h1>

.title {
  font-family: Arial, sans serif;
  font-size: 20px;
}
.page-title {
  color: red;
  font-size: 32px;
}

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

Специфичность

Специфичность представляет собой вес, придаваемый конкретному правилу CSS, и определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS.

Для того чтобы правильно рассчитать специфичность, мы можем разбить селекторы на следующие группы по весу от большего к меньшему:

селекторы по идентификатору id;
селекторы по классам, атрибутам и псевдоклассам (например, :hover);
селекторы по тегам и псевдоэлементам (например, ::before);
универсальный селектор (*), комбинаторы (+, >, ~, ‘ ‘) и отрицающий псевдокласс (:not()) — не влияют на специфичность.

Теперь отбросим последнюю группу, а остальные запишем в виде трёх последующих чисел, равных количеству селекторов каждой группы. Рассмотрим сразу на примере, чтобы было понятно:

Селектор:	Специфичность:
`#page-title {}`	1-0-0
`.title {}`	0-1-0
`h1 {}`	0-0-1
`h1.title#page-title {}`	1-1-1
`.title#page-title {}`	1-1-0
`h1#page-title {}`	1-0-1
`.title.red-title#page-title {}`	1-2-0
`div .title {}`	0-1-1
`div h1#page-title {}`	1-0-2
`#main h1#page-title {}`	2-0-1

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

Здесь стоит отметить, что чем проще селекторы, которые вы используете, тем меньше проблем с расчётом специфичности вы испытываете.

Встроенные стили, задаваемые в теге через атрибут style имеют больший приоритет и перекрывают любую специфичность селекторов.

<span style="color: red;">Текст</span>

Наибольший же приоритет объявлению CSS-свойства задаёт ключевое слово !important, которое добавляется сразу после значения свойства:

.selector {
  color: red !important;
}

Примечание: !important стоит использовать только в исключительных крайних случаях.

5. Псевдоклассы

Псевдокласс — это ключевое слово, добавленное к селектору, которое определяет его особое состояние.

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

:hover

Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышь.

В примере ниже при наведении мыши на элемент его цвет изменится с чёрного на красный.

.element {
  color: black;
}

.element:hover {
  color: red;
}

:active

Псевдокласс :active определяет стиль активного элемента, как правило, это время между нажатием и отпусканием пользователем кнопки мыши.

В следующем примере при наведении мыши на элемент его цвет изменится с чёрного на красный, а при нажатии — на тёмнокрасный.

.element {
  color: black;
}

.element:hover {
  color: red;
}

.element:active {
  color: darkred;
}

:first-child и :last-child

Псевдоклассы :first-child и :last-child находят элементы, являющиеся первым и последним в своём родителе соответственно.

Пример:

<article>
  <p>First element</p>
  <div>Second element</div>
  <span>Last element</span>
</article>

article {
  color black;
}

article>:first-child {
  color: green;
}

article>:last-child {
  color: red;
}

В данном случае любому первому элементу непосредственно внутри <article> задан зелёный цвет текста, а последнему — красный.

:nth-child()

Псевдокласс :nth-child() находит один или более элементов, основываясь на их позиции среди соседних элементов в своём родителе.

Примеры селекторов:

:nth-child(2) — выберет второй элемент среди прочих в своём родителе;
:nth-child(even) или :nth-child(2n) — чётные элементы: 2, 4, 6, и т. д.;
:nth-child(odd) или :nth-child(2n+1) — нечётные элементы: 1, 3, 5, и т. д.;

6. Псевдоэлементы

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Псевдоэлемент указывается сразу после селектора через двойное двоеточие, например:

h1::before {}

::before и ::after

Наиболее часто используемые — ::before и ::after — создают псевдоэлементы, соответственно являющиеся первым и последним потомками выбранного элемента. Для их отображения обязательно указание свойства content, значение которого может быть произвольной строкой текста (в том числе и пустой), или специальными ключевыми словами и правилами.

По умолчанию псевдоэлементы ::before и ::after ведут себя как обычный строчный <span>.
Данные псевдоэлементы часто используются для создания различных декоративных блоков.

::first-letter и ::first-line

Псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нет другого предшествующего нетекстового содержимого.

.selector::first-letter {
  color: coral;
}

Псевдоэлемент ::first-line применяет стили к первой строке блочного элемента.

Есть и другие псевдоэлементы. С некоторыми познакомимся в пределах курса, другие стоит изучить самостоятельно.

Примечание: псевдоэлементы применимы не ко всем тегам, например, не получится их применить к <img> или <svg>.

7. Гайдлайн CSS

На первом уроке мы разобрали, как должна выглядеть правильная разметка страницы. Теперь разберёмся, что же нам делать с CSS.

Порядок свойств

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

Свойства внутри каждого CSS-правила должны логически группироваться в следующем порядке:

Позиционирование;
Блочная модель;
Рамки и фоны;
Оформление текста;
Анимации;
Прочее.

Оформление

Как селекторы, так и объявления пишутся в нижнем регистре;
Перечисляемые селекторы пишутся с новой строки;
До и после комбинатора селекторов ставится пробел;
Перед открывающей фигурной скобкой ставится один пробел;
Каждое объявление в правиле пишется с новой строки;
После значения css-свойства обязательна точка с запятой;
Между css-свойством и его значением должны быть двоеточие и один пробел;
В значениях после запятой ставится один пробел;
Используются двойные, а не одинарные кавычки;
В необязательных случаях кавычки не должны опускаться;
В дробных значениях меньше единицы ноль не пропускается: 0.7 а, не .7;

Пример:

.selector,
.input[type="text"],
.parent > .children {
  
  /* Позиционирование */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  
  /* Блочная модель */
  box-sizing: border-box;
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px 0;
  padding: 0 20px;

  /* Рамки и фоны */
  border: 10px solid #888888;
  border-radius: 10px;
  background-color: #1e1e1e;

  /* Оформление текста */
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  
  /* Анимации */
  animation: hello 1s linear forwards;
  transform: translate(0, 10px);
  transition: color 0.2s ease;
  
  /* Прочее */
  cursor: pointer;
  opacity: 0.7;
  overflow: hidden;
}

8. Методологии CSS.

Проблема

При создании и последующем развитии проекта количество нашего CSS кода неизменно увеличивается, и его становится всё сложнее поддерживать. Помимо общего объёма кода мы неизменно сталкиваемся со следующим:

CSS код при плохом наименовании селекторов очень сложно понять без контекста (разметки HTML, к которой он применяется) и мы не можем отследить взаимосвязь между различными элементами;
Высокая специфичность селекторов сильно затрудняет переопределение свойств таких элементов, если по какой-то причине нужно их изменить;
Создание схожих элементов в разных частях сайта приводит к дублированию кода;
Можно встретить неожиданные наложения свойств различных css-правил при неаккуратном комбинировании селекторов.
При одновременной работе нескольких разработчиков над одним проектом неизбежно возникают различные коллизии наименований и дублирование кода.

Чтобы так или иначе решить все эти проблемы, были созданы различные методологии.

Методологии

OOCSS

OOCSS — Object Oriented CSS (объектно-ориентированный CSS). Это организация CSS-кода, отличительной чертой которой является разделение структуры элемента и его оформления, а также контейнера и содержимого. Автор: Николь Салливан, 2009. Пример:

/* Элемент*/
.button {
  width: 150px;
  height: 50px;
}

/* Стили оформления элемента*/
.button-red {
  background: red;
  color: white;
  border: 1px solid black;
}

/* Стили содержимого */
.header .button {
  width: 250px;
}

В разметке же у нас будет следующее:

<div class="header">
  <button class="button button-red">Отправить</button>
</div>

Преимущества такого подхода очевидны. У нас есть объект — класс для повторного использования, а значит уменьшается дублирование кода. Мы получаем более чистый и переиспользуемый CSS.

Недостатки: OOCSS хорошо подходит только для небольших проектов. Когда проект разрастается, появляются новые элементы, как правило предполагающие иной дизайн или поведение.

При этом если мы отредактируем одно единственное правило — это затронет все элементы, к которым оно применено, даже если нам это не нужно. В результате нам нужно не только писать новые классы, и добавлять их в разметку, а ещё держать все возможные варианты в голове, чтобы не повторяться. Сама же разметка становится очень многословна из-за большого количества классов.

CSS код не является самодокументируемым, имена классов разных элементов страницы не уникальны, возможны наложения стилей.

SMACSS

SMACSS — Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS). Автор: Джонатан Снук, 2011.

Данная методология предлагает разделить стили на 5 частей:

Base rules — стили основных элементов сайта (body, input, button, и т.д.). Для этого используются в основном селекторы тэгов и атрибутов, классы — в исключительных случаях.
Layout rules — стили глобальных элементов (шапка, футер, сайдбар и т.д.). В качестве селекторов используются id (предполагается, что эти элементы не будут встречаться более одного раза на странице).
Modules rules — стили блоков, которые могут использоваться несколько раз на одной странице (меню, диалоговые окна и прочее). Используем классы.
State rules — здесь описываются различные состояния модулей сайта.
Theme rules — стили оформлений.

Пример разметки:

<div class="message is-error">
  There is an error!
</div>

Преимущества: мы получаем модульный и достаточно легко поддерживаемый CSS-код, с которым удобно работать как на крупных, так и небольших проектах.

Но есть и недостатки: нужно строго соблюдать правила, сама логика распределения по категориям может быть не всегда очевидна, плохо подходит, если дизайн предполагает разное представление одних и тех же элементов в разных частях страницы или сайта.

Есть и другие методологии, основанные на схожих принципах и представляющие собой различные вариации двух предыдущих. Недостаток этих методологий — все они не дают так называемых АНБ — абсолютно независимых блоков. CSS-правила не являются полностью переиспользуемыми. Сохраняется проблема высокой специфичности.

Решение проблемы — методология БЭМ. Разберём эту методологию отдельно и далее в учебном проекте будем использовать именно её. Почему — сейчас узнаем.

9. Блок. Элемент. Модификатор.

Методология БЭМ (Блок, Элемент, Модификатор) была создана в 2007 году компанией Yandex. Ключевая идея: все блоки должны быть независимы.

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

Преимущества

Простота освоения. Всё просто, понятно, логично;
В качестве селектора всегда используется только class, вложенные селекторы и комбинаторы избегаются. Как следствие проблемы специфичности не существует. Всегда применяется тот код, что расположен ниже;
CSS является самодокументируемым, по имени класса нам уже ясно, что это такое;
Структура компонентов БЭМ обеспечивает переиспользуемость кода, легкую поддержку проектов, независимость и простую модификацию любых CSS-правил.
Подходит как для очень крупных, так и для совсем небольших проектов.

Недостатки

Единственный недостаток, который можно выделить, — это некоторая многословность разметки: длинные названия классов (чаще всего это два-три слова) и одновременное сочетание нескольких классов на одном элементе (как правило один-два класса, реже три, иногда больше).
Всё.

Как видно из названия, методология предполагает три основные сущности. Давайте их разберём.

Блок

Функционально независимый компонент страницы, который может быть повторно использован. Название блока (class) должно характеризовать его смысл и отвечать на вопрос: “Что это?” (например, кнопка — button или меню — menu), а не описывать его состояние (цвет, размер, и прочее).

Например, обыкновенная кнопка может выглядеть так:

<button type="button" class="button"></button>

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

Блоки могут быть вложены друг в друга.

Элемент

Составная часть блока, которая не может использоваться в отрыве от него. То есть это несамостоятельный HTML-элемент. Название также должно характеризовать смысл (“что это?”), а не состояние и должно состоять из двух частей: название блока и название самого элемента, с двойным подчеркивание в качестве разделителя:
block-name__element-name.

<nav class="nav">
  <a href="index.html" class="nav__link">Главная</a>
  <a href="contacts.html" class="nav__link">Контакты</a>
</nav>

Элементы могут быть вложенными, в том числе и друг в друга, но при этом они по прежнему будут частью самого блока, а не друг друга. Полную иерархию вложенности (block__element-1__element-2) прописывать не допускается.

Давайте разберём, почему это важно. Рассмотрим пример:

<div class="block">
  <div class="block__element-1">
    <div class="block__element-2">
      <div class="block__element-3"></div>
    </div>
  </div>
</div>

Мы имеем структуру HTML-элементов с несколькими уровнями вложенности.

Однако эта же структура в методологии БЭМ всегда будет представлена плоским списком элементов:

.block {}
.block__element-1 {}
.block__element-2 {}
.block__element-3 {}

А теперь представим, что нам понадобилось изменить структуру HTML-элементов:

<div class="block">
  <div class="block__element-1">
      <div class="block__element-2"></div>
  </div>
  <div class="block__element-3"></div>
</div>

Мы вынесли block__element-3 на два уровня вложенности вверх, но при этом нам совершенно не нужно менять наименования классов и соответствующие CSS-правила для всех затронутых элементов. Всё, что от нас потребуется — внести правки в сами блоки объявлений, и только в том случае, если в этом возникнет необходимость.

Элементы являются необязательной сущностью. Их может не быть вовсе.

Элемент — всегда часть блока и не может использоваться вне него. Если такая необходимость возникает, значит этот элемент нужно выделить в отдельный новый блок.

Таким образом, чтобы понять, является данный компонент блоком или элементом, нужно просто задать себе вопрос, можно ли его использовать отдельно в любом подходящем для этого месте.

Микс

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

Любой БЭМ-блок при необходимости может являться БЭМ-элементом другого блока:

<header class="header">
  <img src="images/logo.png" alt="logo" class="logo header__logo" />
</header>

<!-- Где-то здесь основной контент страницы -->

<footer class="footer">
  <img src="images/logo.png" alt="logo" class="logo footer__logo" />
</footer>

В данном примере мы имеем три БЭМ-блока: header, logo, footer.
При этом logo одновременно является дочерним элементом двух других блоков.

В соответствующем CSS-правиле .logo {} мы задаём только внутренние свойства, отвечающие за его структуру и внешний вид, например размеры, прозрачность и т.п.

В правилах .header__logo {} и .footer__logo {} задаём внешние, отвечающие за расположение элемента внутри блока, в том числе и по отношению к другим его элементам (позиционирование, внешние отступы и другие).

В данном примере наш логотип и в шапке и в футере будет выглядеть абсолютно одинаково, но в шапке может быть расположен, например, в верхнем левом углу, а в футере — посередине.

То же самое справедливо для сколь угодно больших и сложных блоков. Они всегда могут быть элементами других, ещё больших блоков.

Модификатор

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

Имя модификатора состоит из двух или трёх частей: название блока, название элемента (если это элемент) и название модификатора с двойным дефисом в качестве разделителя:

block-name--modificator или block-name__element-name--modificator:

<button type="button" class="button button--red"></button>

Примечание: для модификаторов мы будем использовать синтаксис Николаса Галлахера. В классическом БЭМ модификатор указывается через одно нижнее подчёркивание.

Пример разметки:

<div class="popup">
  <button class="popup__button button">
    Назад
  </button>
  
  <button 
    class="popup__button 
           popup__button-–no-margin
           button 
           button-–red"
  >
    Отправить
  </button>
</div>

Пример соответствующих CSS-правил:

.button {
  height: 20px;
  padding: 0;
  background: transparent;
  font-size: 16px;
  line-height: 20px;
  color: white;
}
.button--red {
  color: red;
}

.popup__button {
  margin: 0 10px;
}
.popup__button--no-margin {
  margin: 0;
}

Примечание: БЭМ это больше, чем CSS-методология. БЭМ работает не только с CSS, но и с JavaScript, и предоставляет собой комплексное решение по созданию архитектуры. Но нам в своих учебных проектах достаточно просто придерживаться правил по наименованию классов. При этом всегда стоит помнить: методология должна служить вам, а не вы ей. Её задача — облегчить вам жизнь. Но если есть насущная необходимость отойти от правила, почему нет?

Задание 2: На 1 уроке мы уже должны были выделить основные элементы нашей главной страницы в соответствии с дизайном.
Теперь задайте всем элементам, начиная с <body>, подходящие классы в соответствии с методологией БЭМ. В вашей разметке не должно остаться элементов без классов.
Попробуйте задать некоторые стили отдельным элементам, которые вам понятны на данный момент. Внешний вид сейчас значения не имеет, постепенно приведём всё в порядок.

Резюме

На данном уроке мы познакомились с основами CSS, разобрали гайдлайн и методологии. На следующем занятии поговорим о блочной модели, потоке документа и позиционировании.

10. Материалы для самостоятельного изучения

Руководство по CSS:
https://developer.mozilla.org/ru/docs/Web/CSS/Reference
Специфичность:
https://developer.mozilla.org/ru/docs/Web/CSS/Specificity
Псевдоклассы:
https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-classes
Псевдоэлементы:
https://developer.mozilla.org/ru/docs/Web/CSS/Pseudo-elements
БЭМ:
https://ru.bem.info/methodology/
наиболее важные пункты: 1, 2, 3, 4, 5, 8, 9, «Какие проблемы решает»

Рубрикатор

Выберите категорию

Облако #тегов

1. Введение в CSS

Таблицы стилей

Правило @import

2. CSS-правила и селекторы

CSS-правила

Селекторы и комбинаторы

CSS-свойства и значения

Наследование

3. Единицы измерения

Пиксель (px)

Проценты %

em

rem

vw, vh, vmin, vmax

4. Каскад и специфичность

Специфичность

5. Псевдоклассы

:hover

:active

:first-child и :last-child

:nth-child()

6. Псевдоэлементы

::before и ::after

::first-letter и ::first-line

7. Гайдлайн CSS

Порядок свойств

Оформление

8. Методологии CSS.

Проблема

Методологии

OOCSS

SMACSS

9. Блок. Элемент. Модификатор.

Преимущества

Недостатки

Блок

Элемент

Микс

Модификатор

Резюме

10. Материалы для самостоятельного изучения

CSS-справочники: