Доброго дня.
Философский вопрос. Есть у меня блоки с подобным набором классов:
<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?
Заранее спасибо.