0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p><strong>Вёрстка</strong>, да и просто сам CSS, являются отдельным пунктом нелюбви разработчиков к фронтенду. Поддержка CSS в больших проектах может превратиться в хождение по минному полю, даже если применяются современные библиотеки/фреймворки, поддерживающие компонентный подход.</p>
1
<p><strong>Вёрстка</strong>, да и просто сам CSS, являются отдельным пунктом нелюбви разработчиков к фронтенду. Поддержка CSS в больших проектах может превратиться в хождение по минному полю, даже если применяются современные библиотеки/фреймворки, поддерживающие компонентный подход.</p>
2
<p>Если же вы будете придерживаться методологий вёрстки, то сможете облегчить поддержку большого проекта и локализовать изменения при решении задач.</p>
2
<p>Если же вы будете придерживаться методологий вёрстки, то сможете облегчить поддержку большого проекта и локализовать изменения при решении задач.</p>
3
<p>Существует несколько различных CSS-методологий: 1.<em>“Как быстрее”</em>- да, это тоже методология; 2. SMACSS; 3. OOCSS; 4. FUN; 5. Atomic CSS; 6. БЭМ, про который мы и будем сейчас рассказывать.</p>
3
<p>Существует несколько различных CSS-методологий: 1.<em>“Как быстрее”</em>- да, это тоже методология; 2. SMACSS; 3. OOCSS; 4. FUN; 5. Atomic CSS; 6. БЭМ, про который мы и будем сейчас рассказывать.</p>
4
<h2>Что же такое БЭМ?</h2>
4
<h2>Что же такое БЭМ?</h2>
5
<p>БЭМ - это сокращение от "Блок-Элемент-Модификатор". В рамках данной методологии компоненты и части страниц логически разбиваются на блоки и элементы, а их CSS-классы пишутся специальным образом, например:</p>
5
<p>БЭМ - это сокращение от "Блок-Элемент-Модификатор". В рамках данной методологии компоненты и части страниц логически разбиваются на блоки и элементы, а их CSS-классы пишутся специальным образом, например:</p>
6
<div class="company-logo__owl company__logo--new-year"></div><p>или</p>
6
<div class="company-logo__owl company__logo--new-year"></div><p>или</p>
7
<div class="company-logo__owl company__logo_new-year"></div><p>Сразу скажем, что правила именования могут отличаться от проекта к проекту. Как и некоторые другие вольности. Поэтому мы разберём только основы БЭМ и наиболее частые ошибки, возникающие при знакомстве с БЭМ.</p>
7
<div class="company-logo__owl company__logo_new-year"></div><p>Сразу скажем, что правила именования могут отличаться от проекта к проекту. Как и некоторые другие вольности. Поэтому мы разберём только основы БЭМ и наиболее частые ошибки, возникающие при знакомстве с БЭМ.</p>
8
<h2>Блок</h2>
8
<h2>Блок</h2>
9
<p><strong>Блок</strong>- это отдельный функциональный элемент, который может использоваться повторно.</p>
9
<p><strong>Блок</strong>- это отдельный функциональный элемент, который может использоваться повторно.</p>
10
<p><strong>Главная страница</strong>(home-page) - хороший пример блока, хоть он и не будет использоваться повторно.</p>
10
<p><strong>Главная страница</strong>(home-page) - хороший пример блока, хоть он и не будет использоваться повторно.</p>
11
<p><strong>Кнопка</strong>(button) - замечательный пример блока. То, что это блок, можно легко сказать по тому, что он будет присутствовать в самых разных местах.</p>
11
<p><strong>Кнопка</strong>(button) - замечательный пример блока. То, что это блок, можно легко сказать по тому, что он будет присутствовать в самых разных местах.</p>
12
<p>В терминах React, Angular и Vue каждый блок будет реализовываться соответствующим компонентом.</p>
12
<p>В терминах React, Angular и Vue каждый блок будет реализовываться соответствующим компонентом.</p>
13
<p>Итак, предположим, что наш блок - это "логотип компании" (company-logo). В HTML он будет иметь следующую разметку:</p>
13
<p>Итак, предположим, что наш блок - это "логотип компании" (company-logo). В HTML он будет иметь следующую разметку:</p>
14
<div class="company-logo"> OTUS </div><p>Блок не должен зависеть от того, где он находится, поэтому в CSS не должно быть, например, margin. Приведём пример CSS:</p>
14
<div class="company-logo"> OTUS </div><p>Блок не должен зависеть от того, где он находится, поэтому в CSS не должно быть, например, margin. Приведём пример CSS:</p>
15
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); }<h2>Элемент</h2>
15
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); }<h2>Элемент</h2>
16
<p>Элемент - часть блока. У блока может быть несколько элементов, а может и не быть совсем. Допустим, у нашего блока есть два элемента - совёнок (owl) и текст логотипа (text).</p>
16
<p>Элемент - часть блока. У блока может быть несколько элементов, а может и не быть совсем. Допустим, у нашего блока есть два элемента - совёнок (owl) и текст логотипа (text).</p>
17
<p>Итак, наш блок с элементами будет иметь следующий вид. Обратите внимание на имена классов:</p>
17
<p>Итак, наш блок с элементами будет иметь следующий вид. Обратите внимание на имена классов:</p>
18
<div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div><p>Обратите внимание на разделитель в имени класса - два подчёркивания __. Он как раз и отделяет имена блоков и элементов.</p>
18
<div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div><p>Обратите внимание на разделитель в имени класса - два подчёркивания __. Он как раз и отделяет имена блоков и элементов.</p>
19
<p>Элемент обязательно должен находиться<strong>внутри блока</strong>, но элементы могут находиться<em>"друг в друге"</em>в разметке в рамках одного блока.</p>
19
<p>Элемент обязательно должен находиться<strong>внутри блока</strong>, но элементы могут находиться<em>"друг в друге"</em>в разметке в рамках одного блока.</p>
20
<p>Итак, пример<strong>неправильного БЭМ</strong>:</p>
20
<p>Итак, пример<strong>неправильного БЭМ</strong>:</p>
21
<!-- Неправильно! Элемент вне блока --> <div class="logo__container"> <div class="logo"> ... </div </div><p>Элементы могут быть только у блоков. Приведём пример частой ошибки при использовании БЭМ:</p>
21
<!-- Неправильно! Элемент вне блока --> <div class="logo__container"> <div class="logo"> ... </div </div><p>Элементы могут быть только у блоков. Приведём пример частой ошибки при использовании БЭМ:</p>
22
<!-- Неправильно! Элемент у элемента --> <div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text"> <span class="company-logo__text__first-letter">O</span>TUS </div> </div><p>Этот код может быть исправлен следующим образом:</p>
22
<!-- Неправильно! Элемент у элемента --> <div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text"> <span class="company-logo__text__first-letter">O</span>TUS </div> </div><p>Этот код может быть исправлен следующим образом:</p>
23
<div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text"> <!-- элементы могут вкладываться друг-в-друга в разметке --> <span class="company-logo__first-letter">O</span>TUS </div> </div><p>И приведём CSS:</p>
23
<div class="company-logo"> <div class="company-logo__owl"></div> <div class="company-logo__text"> <!-- элементы могут вкладываться друг-в-друга в разметке --> <span class="company-logo__first-letter">O</span>TUS </div> </div><p>И приведём CSS:</p>
24
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); } .company-logo__owl { width: 30px; height: 40px; background-image: url(img/owl.png); } .company-logo__text { font-size: 20px; line-height: 40px; }<p>С первого взгляда, выглядит<em>"не очень поддерживаемо"</em>. Со второго взгляда - можно код сократить, используя препроцессоры. На LESS эта простыня будет выглядеть куда приятнее:</p>
24
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); } .company-logo__owl { width: 30px; height: 40px; background-image: url(img/owl.png); } .company-logo__text { font-size: 20px; line-height: 40px; }<p>С первого взгляда, выглядит<em>"не очень поддерживаемо"</em>. Со второго взгляда - можно код сократить, используя препроцессоры. На LESS эта простыня будет выглядеть куда приятнее:</p>
25
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); &__owl { // обратите внимание, что нет повторения имени блока width: 30px; height: 40px; background-image: url(img/owl.png); } &__text { font-size: 20px; line-height: 40px; } }<p>На самом деле, код на LESS не превратится в код CSS выше, а будет даже чуть-чуть правильнее кода CSS, который написан выше. Предлагаем читателям самостоятельно понять почему.</p>
25
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); &__owl { // обратите внимание, что нет повторения имени блока width: 30px; height: 40px; background-image: url(img/owl.png); } &__text { font-size: 20px; line-height: 40px; } }<p>На самом деле, код на LESS не превратится в код CSS выше, а будет даже чуть-чуть правильнее кода CSS, который написан выше. Предлагаем читателям самостоятельно понять почему.</p>
26
<h2>Модификатор</h2>
26
<h2>Модификатор</h2>
27
<p>Предположим, что скоро Новый год, и нам необходимо нашего совёнка одеть в новогоднюю шапочку. И при этом нам не хочется менять уже написанный код (собственно, мы и хотим поддерживаемости). Для этого и существуют модификаторы:</p>
27
<p>Предположим, что скоро Новый год, и нам необходимо нашего совёнка одеть в новогоднюю шапочку. И при этом нам не хочется менять уже написанный код (собственно, мы и хотим поддерживаемости). Для этого и существуют модификаторы:</p>
28
<div class="company-logo"> <!-- мы потом классы чуть-чуть исправим --> <div class="company-logo__owl company__logo--new-year"></div> <div class="company-logo__text">OTUS</div> </div><p>CSS код будет выглядеть следующим образом:</p>
28
<div class="company-logo"> <!-- мы потом классы чуть-чуть исправим --> <div class="company-logo__owl company__logo--new-year"></div> <div class="company-logo__text">OTUS</div> </div><p>CSS код будет выглядеть следующим образом:</p>
29
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); &__owl { width: 30px; height: 40px; background-image: url(img/owl.png); &--new-year { background-image: url(img/owl-new-year.png); } } &__text { font-size: 20px; line-height: 40px; } }<p>Обратите внимание, что в новом классе мы модифицировали только те свойства, которые необходимо. Это достигается за счёт того, что в тэге написаны классы company-logo__owl company__logo--new-year - исходные свойства применяются, потому что они есть в company-logo__owl, а перегруженные - потому что класс модификатора написан после.</p>
29
.company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); &__owl { width: 30px; height: 40px; background-image: url(img/owl.png); &--new-year { background-image: url(img/owl-new-year.png); } } &__text { font-size: 20px; line-height: 40px; } }<p>Обратите внимание, что в новом классе мы модифицировали только те свойства, которые необходимо. Это достигается за счёт того, что в тэге написаны классы company-logo__owl company__logo--new-year - исходные свойства применяются, потому что они есть в company-logo__owl, а перегруженные - потому что класс модификатора написан после.</p>
30
<p>В действительности, писать модификаторы непосредственно у элементов - не самая лучшая практика.<strong>Best practice</strong>состоит в том, чтобы писать модификаторы именно у блоков:</p>
30
<p>В действительности, писать модификаторы непосредственно у элементов - не самая лучшая практика.<strong>Best practice</strong>состоит в том, чтобы писать модификаторы именно у блоков:</p>
31
<div class="company-logo company-logo--new-year"> <!-- мы потом классы чуть-чуть исправим --> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div><h2>Миксин (микс, миксина, примесь)</h2>
31
<div class="company-logo company-logo--new-year"> <!-- мы потом классы чуть-чуть исправим --> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div><h2>Миксин (микс, миксина, примесь)</h2>
32
<p>Про это часто забывают, но в действительности БЭМ - это БЭММ - "Блок-Элемент-Модификатор-Миксин". Блок часто является элементом другого блока, плюс отображение может отличаться от того места, где он находится (точнее - от того блока, где блок является элементом).</p>
32
<p>Про это часто забывают, но в действительности БЭМ - это БЭММ - "Блок-Элемент-Модификатор-Миксин". Блок часто является элементом другого блока, плюс отображение может отличаться от того места, где он находится (точнее - от того блока, где блок является элементом).</p>
33
<p>Итак:</p>
33
<p>Итак:</p>
34
<header class="header"> <!-- header__logo - это как раз и есть миксим к company-logo --> <div class="company-logo company-logo--new-year header__logo"> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div> <div class="header__menu">...</div> </div><p>Обратите внимание на порядок следования классов, а именно, что header__logo стоит последним. Это позволяет изменять отображение блока как элемента в другом блоке.</p>
34
<header class="header"> <!-- header__logo - это как раз и есть миксим к company-logo --> <div class="company-logo company-logo--new-year header__logo"> <div class="company-logo__owl"></div> <div class="company-logo__text">OTUS</div> </div> <div class="header__menu">...</div> </div><p>Обратите внимание на порядок следования классов, а именно, что header__logo стоит последним. Это позволяет изменять отображение блока как элемента в другом блоке.</p>
35
<p>Приведём пример CSS:</p>
35
<p>Приведём пример CSS:</p>
36
.header { &__logo { // .header__logo - микс background: white; // применится это правило } } .company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); // ... }<p>Если же мы напишем классы в другом порядке, то не сможем поменять цвет фона без !important:</p>
36
.header { &__logo { // .header__logo - микс background: white; // применится это правило } } .company-logo { padding: 10px; background-color: rgba(0, 0, 0, 0.1); // ... }<p>Если же мы напишем классы в другом порядке, то не сможем поменять цвет фона без !important:</p>
37
<div class="header__logo company-logo company-logo--new-year"><p>Учитывайте это, когда будете разрабатывать React/Angular/Vue компоненты.</p>
37
<div class="header__logo company-logo company-logo--new-year"><p>Учитывайте это, когда будете разрабатывать React/Angular/Vue компоненты.</p>
38
<p>Вот мы и рассмотрели основы и некоторые ошибки. Если вас заинтересовал<strong>БЭМ</strong>, то настоятельно рекомендуем погрузиться в мир БЭМ здесь:<a>http://getbem.com/</a><a>https://ru.bem.info/</a></p>
38
<p>Вот мы и рассмотрели основы и некоторые ошибки. Если вас заинтересовал<strong>БЭМ</strong>, то настоятельно рекомендуем погрузиться в мир БЭМ здесь:<a>http://getbem.com/</a><a>https://ru.bem.info/</a></p>
39
<p><em>И не забывайте оставлять комментарии!</em></p>
39
<p><em>И не забывайте оставлять комментарии!</em></p>
40
40