AzaBroflovski
@AzaBroflovski
js developer

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

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

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;
}

Какой вариант более правильней - многократно использовать один класс, или же прописывать каждому свои стили?
  • Вопрос задан
  • 467 просмотров
Решения вопроса 4
@EarlyGrave
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Второй вариант лучше потому что:
* нет контекста, нет зависимости от «родительского» блока
* большая гибкость в разметке. можно двигать классы по HTML не трогая при этом css
* соблюдается «принцип единственной ответственности» — когда класс выполняет только одну функцию, легче дебажить

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

Но стоить отметить, что atomic css в чистом виде подходит не ко всем типам проектов.
Ответ написан
AlexKeller
@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>

Классы по возможности должны говорить о чем этот блок, а не как он выглядит
Ответ написан
tema_sun
@tema_sun
Во втором варианте вы сделали крохотный шаг в сторону БЭМ. Продолжайте идти туда (https://ru.bem.info/)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Froggyweb
Оба плохи из-за фиксированных размеров как минимум
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы