Когда-то давно я прочитал статьи Витали Харисова на тему CSS верстки, а в частности его идеи БЭМ (Блок Элемент Модификатор) или Неискажающего блока. Честно говоря верстальщик из меня дай бог среднеуровневый, усвоить такую идеологию мне было очень тяжело. В частности потом меня к этому подтолкнул верстальщик на моей старой работе, после которого на новой вся верстка других верстальщиков мне показалась немного кашмарной.

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

Здесь снизу вверх можно прочитать про “БЭМ”. Далее я буду делать небольшие выноски с этого клуба.

Определение независимого блока:

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

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

Вот простой пример блока новостей:

Теперь придумаем CSS:

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

Тут наше любимое наследование делает свое дело, а именно div .comments .title честно наследует свойства от .news .title. Придется задуматься над именами классов или же обнулить все свойства класса вышестоящего. Давайте теперь посмотрим пример на основе БЭМ:

Пересечений классов теперь быть не может принципиально, но вот имена классов в html-верстке слегка раздулись. Тут можно найти золотую середину и использовать например вместо .b-news-comments__title — .b-news-comments .title. Но опять же раз на раз не приходится, и мы снова в последствии можем столкнуться с пересечение имен классов.

Вообще нафиг этот независимый блок, если у нас есть дочерние классы, но в некоторых старых броузерах (IE6) это не будет работать, или будет работать криво (IE7).

В идеале по методу независимых блоков:

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

Еще я забыл рассказать про префиксы (.b-, .l-, .h- и пр.). Я думаю идея хорошая, хотя бы не будет проблем с поиском классов через автокомплит :). Это ни что иное, как нейм-спейсы, которые позволяют к примеру отделить обычные блоки (.b-) от разметки (.l-).

Пока все же я склоняюсь к БЭМ...