Как лучше: повторять стили или ставить много классов?

Question

[Владислав Громов]

Покажу сразу примером:
Как лучше, так:

.y { color: #f4f200; }

.b { color: #131313; }

.mb10 { margin-bottom: 10px; }

.mt10 { margin-top: 10px; }

<h3 class="y mt10">HELLO</h3>
<a href="#" class="b mb10">LINK</a>
<a href="#" class="y">LINK</a>
<h2 class="mt10 mb10">HELLO</h2>

ИЛИ ТАК:

<h3 class="title">HELLO</h3>
 <h3 class="title2">HELLO</h3>
 <a href="#" class="title3">HELLO</a>

.title { color:#f4f200; font-weight: bold; margin-bottom: 10px; }
.title2 { color:#131313; font-weight: regular; margin-bottom: 10px; }
.title3 { color:#f4f200; font-weight: regular; margin-top: 20px; }

Answer 1

[bromzh]

Никак, давай элементам осмысленные имена. Не как они должны выглядеть, а что они из себя представляют. И не надо делать классы, явно указывающие на размер/цвет и т.д. Потому что это почти ничем не лучше, чем вёрстка прямо в html-коде через атрибут style.
Можешь посмотреть как рекомендуют чуваки из яндекса.

Answer 2

[Сергей]

Погуглите про БЭМ
Второй вариант лучше

Answer 3

[littleguga]

Советую использовать sass/less и писать так, чтобы Вам было удобно. В любом случае потом нужно использовать минификатор стилей, который и так всё сожмет и распределит, как нужно.

Также если у вас есть одинаковые по смыслу блоки, можно задать им общий стиль titles, а уже отдельно каждому заголовку определить цвет/размер и другие отличающиеся стили.

Answer 4

[Дима Паутов]

1й подход разумеется. На больших проектах никуда без этого. В исходный код того же яндекса зайдите и все увидите. А бутстрап? Тоже самое, взгляните например на создание кнопки! Там основа, цвет, размер. Так же и вам нужно делать, да и всем! Для этого и придуманы классы, что бы использовать их много раз, а писать 1!

Только именовать все нужно так, что бы было понятно, что этот класс делает!
but - Создает основу кнопки.
butWarning - делает кнопку с оформлением, означающим осторожность!
butBig - делает кнопку большой

Comments

[Александр Таратин]

>А бутстрап? Тоже самое, взгляните например на создание кнопки!
Просто люди неправильно его готовят.

1й подход == Перевод стилей в разметку, только вместо stryle="..." пишем class="..."

А чтобы избежать дублирования следует использовать cscc c миксинами (или другой препроцессор).
Касательно увеличения размера конечного css, то он будет нивелирован gzip-ом так как повторяющиеся части будут ужаты.