Что лучше — много классов и модульный css, или мало классов и wet-css?

Question

[Алексей Николаев]

Доброго дня.
Философский вопрос. Есть у меня блоки с подобным набором классов:

<div class="block block_type_wide">
    <div class="cell cell_decorate block__element block__element_dependent"></div>
</div>

Они состоят из различных независимых компонентов, которые работают иногда отдельно, иногда вкупе друг с другом, добавляя друг другу нужный функционал. Данный подход начинает меня несколько напрягать, т.к. я не люблю bootstrap-подобную верстку в крупных проектах (имеется в виду куча бессмысленных несемантичных классов, императивно описывающих dom-ноды).

Обычно я всегда так и делаю, т.к. рукодствуюсь чистотой css - повторяющийся функционал выносится в компонент, и, таким образом, получаются максимально компактные css-файлы. Однако хотелось бы прийти к декларативной разметке, наподобие:

<div class="news-entry">
    <div class="news-entry__intro"></div>
</div>

Но меня останавливает, что в данном случае мне придется либо использовать миксины, что приведет к дублированию кода и функционала внутри css (фактически, несколько css-классов будут делать практически одно и то же), либо юзать расширение (@extends). Это снизит чистоту css-кода и приведет к увеличению выходного файла.

Что лучше? Стоит ли закрыть глаза на неидеальный css ради идеального html?
Заранее спасибо.

Comments

[Сергей delphinpro]

Это снизит чистоту css-кода

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

[Сергей delphinpro]

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

Answer 1

[Антон]

Рекомендую использовать css modules