Какой css код более правильный?

Question

[Aza Broflovski]

Какой вариант кода более правильный?

1 варинат

<div  class="just-block">
     <h2>Hello world</h2>
</div>

<div class="navigation">
     <h2>Site Nav </h2>
</div>

.just-block {
width: 100px;
height: 100px;
background: #fff;
}

.just-block h2 {
font-size: 24px;
color: #777;
}

.navigation {
width: 500px;
height: 300px;
background: #eee;
}

.navigation h2 {
font-size: 17px;
color: #ccc;
}

2 Вариант

<div  class="just-block">
     <h2 class="font-size-large">Hello world</h2>
</div>

<div  class="navigation">
     <h2 class="font-size-medium">Hello world</h2>
</div>

.just-block {
width: 100px;
height: 100px;
background: #fff;
}

.navigation {
width: 100px;
height: 100px;
background: #fff;
}

.font-size-large {
font-size: 32px;
}

.font-size-medium {
font-size: 22px;
}

Какой вариант более правильней - многократно использовать один класс, или же прописывать каждому свои стили?

Comments

[Ankhena]

Второй, только названия классов не стоит завязывать на цвет, размер и т.д. Лучше на "зачем он" или "что это".
Т.е. класс .attention лучше, чем .red

Answer 1

[Froggyweb]

Оба плохи из-за фиксированных размеров как минимум

Comments

[Aza Broflovski]

это просто пример) хотел спросить что лучше: многократно использовать один класс или же каждому свои стили прописовать ?

[Froggyweb]

Aza Broflovski: используй бэм или другую методологию. А так вопрос про коня в вакууме.

Answer 2

[EarlyGrave]

2 вариант

Comments

[Aza Broflovski]

спасибо за ответ, посмотрим что скажут и другие)

[Андрей]

не надо всякие гадости советовать, в них же могут поверить.

[Aza Broflovski]

браузер не сойдет с ума увидев столько классов ?

Answer 3

[Павел Радьков]

Второй вариант лучше потому что:
* нет контекста, нет зависимости от «родительского» блока
* большая гибкость в разметке. можно двигать классы по HTML не трогая при этом css
* соблюдается «принцип единственной ответственности» — когда класс выполняет только одну функцию, легче дебажить

https://adamwathan.me/css-utility-classes-and-sepa... — в статье на примерах показаны преимущества такого подхода.

Но стоить отметить, что atomic css в чистом виде подходит не ко всем типам проектов.

Comments

[Aza Broflovski]

спасибо

Answer 4

[AlexKeller]

Несмотря на то, что второй получше, не надо так делать. CSS придумали, чтобы отделить внешний вид от разметки. А вы все равно в разметке используете информацию о том, как этот блок должен выглядеть. Это все равно, что наставить классов "red" или "fs10px" по всему проекту. А потом приходит заказчик и говорит, что ваш красный недостаточно зеленый. И пошло-поехало.

Так что, как по мне, правильнее будет:

<div class="just-block">
     <h2 class="just-block-title">Hello world</h2>
     <div class="just-block-content">Blah-blah-blah</div>
</div>

Классы по возможности должны говорить о чем этот блок, а не как он выглядит

Comments

[Aza Broflovski]

Спасибо

Answer 5

[tema_sun]

Во втором варианте вы сделали крохотный шаг в сторону БЭМ. Продолжайте идти туда (https://ru.bem.info/)

Comments

[Aza Broflovski]

спасибо)

[Андрей]

Я верно не совсем понимаю суть БЭМ, потому что мне кажется что автор почти прошел путь до atomic.css нежели шагнул к БЭМ)

[tema_sun]

Андрей: можно и так сказать. У меня acss был одним из шагов к бэму.

[Aza Broflovski]

Всем большое спасибо)