Вложенные селекторы и изменение блока контекстом

Пример разметки:

.product
   .rate.product__rate
        .rate__stars

Пример css-правила:

.product__rate .rate__stars { /*...*/ }

Я правильно понимаю, стилевое правило выше противоречит рекомендациям, описанных во Вложенные селекторы? Какие есть варианты модификации .rate__stars кроме использования модификатора на этом элементе или его родителе?

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

Эта рекомендация относится исключительно к правилам, наследуемых по каскаду от родителя? Вложенный селектор в примере сбил с толку, невольно появились параллели с примером .product__rate .rate__stars.

4 years ago

Realetive

Без контекста правильный совет дать сложно, но предположу, что блок .rate используется с разным оформлением, т. е. логично ввести модификатор:

.product
   .rate.rate_view_product.product__rate
        .rate__stars

.rate_view_product .rate__stars {}

В противном случае (если rate везде одинаковый), стили для ratestars пишутся в самом .ratestars.

4 years ago

ghost

предположу, что блок .rate используется с разным оформлением

Да, спасибо.

По вопросу, связанным с Изменение блока контекстом - можете привести пример использования на практике или собственное объяснение "что имеется в виду"? Вроде с виду все просто, а мозг почему-то завис в непонимании.

4 years ago

Realetive

Да. Например, у нас есть какой-то блок, на разметку которого мы не можем влиять CSS-классами — WYSIWIG-редактор, который заполняют менеджеры в админке (или markdown-разметка). Тут каскад — единственный «дешёвый» способ «достучаться» до оформления вложенных блоков.

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