Насколько целесообразно использовать такие селекторы?

Question

[coi1751]

Допустим я задал для h4 в секции 2 определенные стили, затем я копировал код из секции 2 в секцию 5 (так как секции очень похожи, только контент и отступы подправить), и написал .section5 h4 { свойства }
Или же надо менять классы на другие? но тогда придется повторять много стилей. (только учусь, поэтому важно понять подобные моменты)

Comments

[Froggyweb]

Копировать вообще ничего не стоит ни в css ни в c#

[coi1751]

Froggyweb, стоп, а причем тут c# ?)

[Froggyweb]

coi1751,

затем я копировал код из секции 2 в секцию 5 (так как секции очень похожи, только контент и отступы подправить), и написал .section5 h4 { свойства }

кто не спрятался я не виноват. т.е. вместо задания хотя бы общего класса ты копируешь css за это можно получить по попе. недавно разгребал сайт где в 20 слайдерах пагинация определялась индивидуально копипастомю причем с очень специфичными правилами и в некоторых случаях с импортант хотя импортант был указан на всякий случай.

Answer 1

[Дмитрий Дарт]

Целесообразно. БЭМ рулит, почитайте про него. Только имена классов не привязывайте к каким-то параметрам, т.е. не стоит делать

.blue{
    color: blue
}

Т.к. цвет вы потом решите поменять а имя класса вам лень будет менять. Каскадом поменьше пользуйтесь, побольше вещами типа:

.h4, .h5{
    text-align: center;
}
.h4{
    font-size: 50px;
}
.h5{
    font-size: 40px;
}

Comments

[tema_sun]

text-align (как и любое позиционирование) лучше через микс делать.

[game802]

tema_sun, а не могли бы Вы показать/рассказать, о чем именно Вы говорите? Просто интересно увидеть миксины, которые отвечаю за позиционирование (на сколько я понял, использование более нестандартного способа). Спасибо!

Answer 2

[Иван]

читай про бем)

Answer 3

[tema_sun]

Практически всегда можно избежать селекторов по имени тега, и это стоит делать. От каскада тоже лучше отказаться. Про БЭМ вам уже написали. Т.е. вашем случае лучше использовать микс:

<section class="section4">
<h4 class="h4">Заголовок секции 4</h4>
</section>

<section class="section5">
<h4 class="h4 section5__h4">Заголовок секции 5</h4>
</section>

.section4{....}
.section5{....}
.section5__h4{
text-align:center
}

.h4{
font-size: 20px
}