HTML разметка по методологии БЭМ

[Andrew_007]

Доброго времени суток!

 

Осваиваю верстку по методологии БЭМ. Не совсем понятно как делать HTML разметку. Как я понимаю нужно именовать классами все теги и при этом все блоки состоят из элементов, дальше все элементы состоят из блоков, далее эти блоки состоят из элементов, далее эти элементы состоят из блоков и так далее?

То есть непонятно как определить где блок а где элемент, согласно вложенности?

Вот так например правильно? http://codepen.io/Andre_w/pen/EaLVJW?editors=100

 

Правильно я понял разметку по БЭМ или не совсем?

Edited February 22, 2015 by Andrew_007

[raptor-dm]

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

[antonKar]

Вначале надо вылечиться от диватоза.

 

Потом уже смотреть на дизайн, ваш нынешний набор классов никуда абсолютно не годится. "content-box" -  что это? Это статья? Это примечание? Это новость?

 

Такое количество обёрток тоже никуда не годится. Для тега button давать класс button? Не верстайте на бутстрапе, это плохо сказывается на верстальнических скиллах.

 

Для "контентных" тегов (типа p) не давайте классы, это излишне. БЭМ не всегда нужен, ибо параграф - он и в Африке параграф.

 

Класс "side". И что это мне должно сказать? Что там внутри? Рекламные баннеры? Фотки голых тёток?

 

"content-box__buttom" (buttom?) а если придёт дизайнер и скажет, что теперь этот блок будет слева вверху?

 

Отредактировал ваше творение http://codepen.io/anon/pen/ZYoQye

 

з.ы. Ошибся у себя, скорее просто "news-subscribe"

Edited February 22, 2015 by antonKar

[Sergik+]

Мое личное мнение что умение правильно именовать классы приходит просто с опытом (у меня тоже

проблемы с этим), ну а бэм многие воспринимают как просто нэймспайс а это ошибка, у бэма куча

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

сторону smacss.

Кстати даже разработчики бэма говорят что не стоит безумно все копировать, берите лучшее.

Edited February 22, 2015 by Sergik+

[Vessel]

Считаю, что БЭМ - это для очень больших проектов. Но если даже не БЭМ, то что-то другое. Любой порядок, любая архитектура CSS, но она должна быть. В противном случае в css будет хаос. Команда должна одинаково писать код.

 

Из БЭМа взял для себя принцип независимости блоков. Да, получается так, что при таком стиле код много где дублируется, разрастается. Однако при таком подходе любой блок можно легко продублировать на странице, проекте, другом проекте. Так блок легко дорабатывать. К тому же, такой код легко понимается другим верстальщиком.