CSS-классы - общий подход и стандарты

В итоге долгих и мучительных размышлений пришел к нижеследующим соображениям. Допускаю, что какие-то соображения могут звучать по-дилетантски, ибо сам не верстальщик, поэтому прошу строго не судить, а критиковать конструктивно, предлагая какие-то альтернативные варианты. В качестве предисловия замечу, что некоторое влияние на все эти соображения оказала концепция БЭМ. При этом я исхожу из того, что БЭМ хоть штука хорошая и полезная, но не стоит воспринимать ее как догму, а лишь как толчок для размышлений.

1) От общего файла reset.css не отказываемся. Допускается в самом начале выполнить общую установку стилей для тегов. Все-таки вряд ли кто-то будет на нашем движке писать новый Яндекс, поэтому принимается небольшой проигрыш в быстродействии в пользу значительного удобства формирования таблицы стилей.

2) В CSS-файлах крайне не рекомендуется использовать привязку к id, только к классу, даже если предполагается, что элемент на странице будет один:

/* так НЕ правильно */
#id {...}

/* так правильно */
.class {...}

Это вовсе не значит, что id вообще нельзя использовать в тегах, но использовать его, только если это нужно для обработки в javascript. А оформление к id привязывать нельзя.

3) Основные блочные элементы должны иметь класс, который однозначно их определяет. И имя класса должно начинаться с префикса «b-». Имя класса может состоять из нескольких слов, в этом случае слова разделяются знаком подчеркивания. Например:

<style>
.b-topic_page {...} /* топик на отдельной странице */
.b-topic_page_header {...} /* блок заголовка топика на отдельной странице */
.b-topic_list {...} /* список топиков */
</style>
<section class="b-topic_page">
...
</section>

4) Блочные элементы могут иметь модификаторы, которые в классах обозначаются через символ «дефис»:

<style>
.b-topic_page-draft {...} /* топик на отдельной странице - черновик */
.b-topic_page-public {...} /* топик на отдельной странице - опубликованный */
</style>
<section class="b-topic_page-draft">
...
</section>

При таком подходе мы можем задавать свойства для целой группы классов (куда будут входить все подклассы с модификаторами), используя селектор атрибута с префиксом. Например:

[class|="b-topic_page"] {...}

Здесь мы задаем свойства всем классам, которые имеют префикс b-topic_page-. Плюс обеспечивается совместимость со стилистикой bootstrap.

5) При задании свойств блочным элементам крайне не рекомендуется использовать имена тегов. Например:

/* так НЕ правильно */
section.b-topic_page {...}

/* так правильно */
.b-topic_page {...}

6) По возможности максимально сокращать вложенность классов при описании. Например:

/* так плохо */
.b-topic_page .b-topic_header {...}
.b-topic_page .b-topic_header .b-topic_title {...}

/* так хорошо */
.b-topic_page_header {...}
.b-topic_page_header_title {...}

7) Везде, где какой-то класс используется для модификации другого конкретного класса, нужно использовать подклассы-модификаторы. Например, так неправильно:

<style>
.b-topic_page {...} /* основной класс блочного элемента */
.b-topic_page.draft {...} /* вспомогательный класс, используется только с b-topic_page */
</style>
<section class="b-topic_page draft">
...
</section>

Так правильно:

<style>
.b-topic_page {...} /* основной класс блочного элемента */
.b-topic_page-draft {...} /* вспомогательный подкласс-модификатор */
</style>
<section class="b-topic_page-draft">
...
</section>

8) Модификаторы могут быть объявлены и сами по себе. Например:

<style>
.m-disabled {...}
.m-hidden {...}
</style>
<button class="m-hidden">...</button>
<form class="m-hidden">
...
</form>

Исключения пока составляют классы, явно используемые из bootstrap. Например:

<section class="b-topic_content span12">
...
</section>

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

<button class="btn"><i class="icon-plus"></i></button>

Предлагаю это обсудить, возможно, как-то поправить, добавить, модифицировать. И следующим шагом уже определить перечень конкретных классов, которые используются при верстке шаблона.

Затем — подогнать бт-скин под наши же правила.