Именование классов
использование методологии БЭМ
БЭМ - Блок / Элемент / Модификатор
Основные проблемы
- Чрезмерно длинные селекторы
- Дублирование одних и тех же стилей
- Перегруженность селекторами (слишком глубокая вложенность)
- Отсутствие глобальных стилей
БЭМ Принципы
(разбивка сайта на блоки)
Блок это минимальная составляющая сайта, которая может существовать отдельно, независимо от того где она используется.
БЭМ Принципы
(описание блока)
.menu {
&__item {
float: left;
}
&__link {
font-size: 16px;
&--active {
font-weight: 700;
}
}
}
.menu {
}
.menu__item {
float: left;
}
.menu__link {
font-size: 16px;
&--active {
font-weight: 700;
}
}
После того как мы выделили блоки, их нужно разбить на составляющие (элементы этого блока), и прописать различные их состояния через модификаторы
Использование БЭМ на примере
При описании глобальных стилей блока не должно затрагиваться позиционирование этого блока, а только внешний вид. Таким образом все отступы и смещения должны применяться только в определенном контексте использования.
Пример: есть дизайн с секциями "Our Team Members" и где-то на другой странице - "Our Sponsors", которые слегка отличаются, но основное поведение схоже. Давайте назовем классы.
Неправильная реализация
// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
.our-team-members {
.our-team-members-member-item {
.our-team-members-member-item-photo { ... }
.our-team-members-member-item-name { ... }
.our-team-members-member-item-position { ... }
.our-team-members-member-item-text { ... }
.our-team-members-member-item-socials {
// And a junior developer often try to reflect 1:1 DOM structure to styles.
// Many-many-many nesting levels
// OMG! O_o It already looks like a story
.our-team-members-member-item-socials-item { ... }
}
}
}
// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
.our-sponsors { ... }
.our-sponsors-sponsor-item { ... }
// ... etc the same to above code
Что же здесь неправильного?
// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
// 'our' is totally 'empty'-word, and 'members' has weak and repetitive meaning
.our-team-members {
.our-team-members-member-item {
// All is very/super long
.our-team-members-member-item-photo { ... }
// member == item
// Looks like 'member' needs to be a block, not an element
.our-team-members-member-item-name { ... }
.our-team-members-member-item-position { ... }
.our-team-members-member-item-text { ... }
// Looks like 'social' needs to be a block, not an element
// We can have .socials {} in the header or footer, etc
.our-team-members-member-item-socials {
// Many levels nesting is the pure evil!
.our-team-members-member-item-socials-item { ... }
}
}
}
// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
// Many classes with the same styles - repeating yourself is very bad!
.our-sponsors { ... }
.our-sponsors-sponsor-item { ... }
// ... etc the same to above code
По началу можно использовать гугл передчик, чтобы подобрать более удачное определение для нашей секции
Подбор имени
// These are various names
.employee {} // good, but a bit long and it isn't applicable to customers etc
.employees {}
.individual {} // too long & strange for our goals
.individuals {}
.worker {} // too special
.workers {}
.person {} // good, but doesn't have a plurale form "-s"
.person-list, .people {}
.member {} // not clear and strange for our goals
.team, .team-members, .our-sponsors {}
// Let's stop on that.
// Because 'person' is abstract and we can use it on diffetent context
// (for C-lavel, employees, customers, etc)
.person {}
.person__photo {}
.person__name {}
.person__role {}
.person__desc {}
Правильная реализация
// --------------------------------------------------------------------------------
// Person. Universal person's representation on the website (photo, name, etc)
// --------------------------------------------------------------------------------
.person {
// It's class-modificator of .person, it changes .person on any context
&--famous {
.person__name { font-size: 2em; color: $color-accent; }
}
}
.person__inner {}
.person__photo {} // or 'thumbnail'
.person__name {}
.person__role {} // 'role' is shorter than 'position'
.person__desc {} // or 'description', 'content', 'text'
// It's just an additional class for .social {} item
.person__socials {
// It's a separate global 'social' BEM block with own slyles
// You can rewrite some styles for socials in current context
.social__item {}
}
// --------------------------------------------------------------------------------
// Our Team Members
// --------------------------------------------------------------------------------
// short & clear, it can be .team {}, can use .staff--c-level , to make
// changes to general view of the section
.staff {}
.staff__inner {} // it's a container/wrapper of the staff content
.staff__something {} // Something in the .staff section
.staff__item {} // Optional changes for a .person in .staff, add some spacing etc.
// --------------------------------------------------------------------------------
// Our Sponsors
// --------------------------------------------------------------------------------
// If "Our Leadership Team" is similar to "Our Team Members"
// we make just a class-modificator .staff--leadership
// That class add some changes to the standard .staff styles
.sponsors { ... }
.sponsors .staff__item {} // Optional changes for a .person in .sponsors
HTML реализация данных секций
<section class="staff">
<div class="staff__inner">
<div class="staff__something"></div>
<div class="staff__list">
<div class="person">
<div class="person__photo">
<ul class="person__socials socials">
<li class="socials__item">Facebook</li>
<li class="socials__item">Instagram</li>
<li class="socials__item">Twitter</li>
</ul>
</div>
<h4 class="person__name">Jone Water</h4>
<p class="person__role">Plumber</p>
<p class="person__desc">Lorem ipsum etc...</p>
</div>
<!-- etc -->
</div>
</div>
</section>
<section class="sponsors">
<div class="sponsors__inner">
<div class="person">
<div class="person__photo"></div> // no socials
<h4 class="person__name">Janet Doe</h4>
<p class="person__role">Gold sponsor</p>
<p class="person__desc">Lorem ipsum etc...</p>
</div>
<!-- etc -->
</div>
</section>
Выводы
1) Все имена классов должны быть короткими и понятными
2) Все элементы сайта должны быть отдельными блоками/модулями, которые можно легко повторно использовать по всему сайту, независимо от контекста.
3) При написании стилей всегда стремиться к минимальной вложенности селекторов (без вложенности). Что даст возможность легко переопределять поведение тех или иных элементов.
4) Все стили определенного блока хранятся в одном месте
Именование классов
By alexeysv
Именование классов
Использование БЭМ
- 489