Вложенные селекторы CSS?

Question

[Игорь Петров]

Пытаюсь улучшить свой HTML+CSS код, постепенно изучаю БЭМ, задался вопросом как правильно организовывать селекторы потомков?

UPD: единственно верный вариант, судя по всему:

.block{
    &__header{}
    &__text{}
}

Answer 1

[iBird Rose]

вы сейчас описали случаи которые можно реализовать на SCSS. И запись вида:

.block{
    .block__header{}
    .block__text{}
}

все равно перекомпилируется в CSS так:

.block{}
.block .block__header{}
.block .block__text{}

Также можно написать:

.block{
    &__header{}
    &__text{}
}

так будет правильнее.

Comments

[Игорь Петров]

Я вот и спрашиваю, если в конечном итоге все перекомпилируется в кучу селекторов потомков, то не имеет ли смысл не использовать вложенность вообще?

На сайте БЭМ, я так понял, все отдельно и без вложенности...

[iBird Rose]

Игорь Петров: тут только дело удобства. мне удобно использовать тот вариант который я описал последним. я его и и спользую

[Игорь Петров]

iBird Rose: а по первому варианту что скажешь?
Совсем плохая практика?

[Froggyweb]

Игорь Петров: Да например сеошник скажет убрать h1 и что переписывать CSS?

[iBird Rose]

Игорь Петров: по БЭМ нельзя обращаться к тегам. можно только к классам. да и это логично. ты поставил в верстке h1. а может в проекте там не должно быть h1. тебе потом придется и для h2 к примеру применять такой стиль. а так вместо h1 может стоять любой элемент. главное чтобы этому элементу задали нужный класс.

[Игорь Петров]

iBird Rose: Froggyweb: большое спасибо за ответы :)

[Froggyweb]

теги допустимо использовать для контента забиваемого в визуальных редакторах.