БЭМ – преимущества и недостатки

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

БЭМ недостатки

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

И так, начну с того что на начальном этапе очень трудно придумывать имена классов. И как написано в официальной документации – html получается достаточно засорен названиями “многоэтажных” классов.

Например есть у нас меню которое называется main-menu, и в нем есть элементы li в которых внутри ссылки. То есть стандартное навигационное меню. Еще сделаем один элемент активным для большей наглядности (чтоб добавить модификатор).


<ul class="main-menu">
	<li><a href="#">колбаса</a></li>
	<li  class="active"><a href="#">хлеб</a></li>
	<li><a href="#">масло</a></li>
</ul>

и вот так всё это выглядит в обыкновенном случае.
Стили же будут выглядеть вот так:


.main-menu {
	padding: 10px;
}
.main-menu li {
	list-style: none;
}
.main-menu a {
	font-size: 16px;
}
.active a {
	color: #e3e3e3;
}

Если это невозможно поддерживать в будущем другими разработчиками – бросьте в меня керпич!

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


<ul class="main-menu">
	<li class="main-menu__item"><a class="main-menu__link" href="#">колбаса</a></li>
	<li class="main-menu__item main-menu__item_active"><a class="main-menu__link" href="#">хлеб</a></li>
	<li class="main-menu__item"><a class="main-menu__link" href="#">масло</a></li>
</ul>

Не так аккуратно, правда? И еще посмотрим на стили


.main-menu {
	padding: 10px;
}
.main-menu__item {
	list-style: none;
}
.main-menu__link {
	font-size: 16px;
}
.main-menu__item_active {
	color: #e3e3e3;
}

Прочувствовали удобство? Я пока еще нет :( И это совсем маленький кусок кода, а на больших проектах вообще жесть. Не уверен что будет легко поддерживать такую жесть.

БЭМ преимущества

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


.main-menu a {
	font-size: 16px;
}

и получется что сама конструкция


<a href="#">масло</a>

при перенесении в другое место, будет вообще не отформатирована.

А в случае c БЭМ данная конструкция будет работать повсюду потому, что у неё есть свой класс.


<a class="main-menu__link" href="#">масло</a>

Ну и поспорить трудно что main-menu__link непонятное название. Но стоит ли игра свечей? БЭМ евангелисты говорят что его нельзя использовать частично, но я склоняюсь к распространенному мнению, что кое-что в нем перебор.

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>