.b-left или .b-right?

О наименованиях

В вёрстке абсолютно независимыми блоками, как ни странно, главное - корректно назвать блок/элемент/модификатор, и это достаточно трудоёмкий процесс. Почему это важно? Класс элемента, сконструированный с соблюдением единого принципа, однозначно указывает на его смысл и назначение. При этом хорошо читается его роль (блок, элемент блока) и/или модификация.

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

Нельзя допустить, чтобы название говорило о том, как элемент должен выглядеть, или какой тег ему соответствует. Много лучше, когда название объясняет, что это такое, каков смысл нахождения этого здесь. Про соответствие названия тегу вы, думаю, сами догадываетесь: ничто не вечно, и сегодня это <p>, а завтра <div> и т.д.

Плохо: <div class="left"></div> <p class="news__p"></p> <ul class="ul"> <li class="ul__li"></li> </ul>

Хорошо: <p class="article__teaser"></p> <ul class="menu"> <li class="menu__item"></li> </ul>

Лирическое отступление. У меня иногда возникает ситуация, когда я с трудом даю определение блоку / элементу. И в основном это связано с «красотой» дизайна, не несущего смысловой нагрузки. В эти моменты я грущу, так как бессмысленность дизайнерскоро решения отражается на коде, усложняя его, приводит к потенциальным проблемам, усложняет рефакторинг. Уверен, хороший дизайнер всегда задаёт себе вопросы: что это? почему это здесь?..

О дублировании кода

Рефакторинг, перевёрстка - все эти слова больше не пугают, если названия хорошо сконструированы, не пересекаются, а стили изолированы друг от друга. Тут есть один тонкий момент, связанный с пересечением вёрстки. Часто возникает соблазн вынести общие стили, например, скругления уголков или одинаковые отступы справа, в отдельные классы или даже блоки и примешивать их к одному и тому же html. С одной стороны, это уменьшает дублирование кода, создаёт свой внутрипроектовый фреймворк, позволяет в одном месте изменить значение внешний вид блоков / элементов, к которым добавлены эти примеси. С другой стороны, если увлечься, вёрстка становится размытой и внешний вид блока определяет не один css, связанный только с ним, но также и куча других правил, раскиданных по проекту, а количество класcов на тегах становится устрашающим. Ещё один минус - потеря семантики, так как эти примеси говорят скорее о внешнем виде, чем о сути, и, о ужас, в проекте могут появиться теги, на которые повешены только лишь классы примесей, говорящие не о смысле, а о внешнем виде его. Эта тенденция похожа на деградацию до старых каскадов и глобальных стилей. Рефакторинг такой вёрстки затрудняется. Всё это говорит о том, что не стоит перебарщивать с вынесением общих стилей.

Плохо: <div class="news i-col50 i-left i-nowrap i-rounded-borders"></div>
Плохо: <section class="blog"> <div class="i-col60"> <article class="blog__post"> ... </article> </div> <div class="i-col40"> <aside class="blog__author"> ... </aside> </div> </section>	Хорошо: <section class="blog"> <div class="blog__posts"> <article class="blog__post"> ... </article> </div> <div class="blog__description"> <aside class="blog__author"> ... </aside> </div> </section>

О префиксах

Что касается префиксов, то их использование не имеет особой необходимости. Раньше я использовал разные префиксы: b-, l-, .h, g- и т.п. Если посмотреть на код, то большинство классов получало префикс b-, и это не несло эффективной смысловой нагрузки, только усложняло редактирование. Некоторые префиксы, как h- раньше или i- сейчас, имеют проблемы, связанные с их пониманием. Например, i- префикс предлагается использовать для глобальных блоков, примесей, а также для интерактивных элементов, что само по себе неопределённо и размыто. С другой стороны, иногда использую префикс g- для глобальных стилей (например, g-clear или g-hide) и префикс m- для темизации страницы (вешаю на <body />). Если возвратиться к старым префиксам, то можно отметить префикс l-, который имеет некоторый смысл в плане улучшения читаемости кода. Если подвести итог, то префиксы по большому счёту не нужны и только загромождают код.

О тегах

Так как блок является смысловой единицей, главный, «рутовый» тег блока должен являтся смысловым в плане html-разметки страницы. Такими тегами являются section, article, aside, footer, header, nav. Тег div особой смысловой нагрузки не несёт, как и span, является нейтральным; их стоит использовать для задач оформления, то есть для экстра-разметки, необходимой, чтобы повторить изыски дизайна в вёрстке.

Плохо: <div class="page"> <section class="page_content"> <div class="header"> <header class="logo"> ... </header> </div> </section> ... <footer class="footer"> ... </footer> </div>

Хорошо: <section class="page"> <header class="header"> ... </header> <section class="greeting"> ... </section> <section class="hews"> ... </section> <footer class="footer"> ... </footer> </section>

О выделении блоков

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

Было: <section class="blog"> <article class="blog__post"> <header class="blog__post-info"> ... </header> <div class="blog__post-teaser"> ... </div> </article> <aside class="blog__author"> <div class="blog__author-name"> ... </div> </aside> </section>

Стало: <section class="blog"> <article class="post"> <header class="post__info"> ... </header> <div class="post__teaser"> ... </div> </article> <aside class="author"> <div class="author__name"> ... </div> </aside> </section>