Как лучше задавать классы/селекторы тегам/стилям?

Question

[Alexander]

Для примера:
1 вариант:

<div class="content">
    <div class="logo"></div>
</div>

.content .logo{
backgroud-color: red;
}

<div class="content">
    <div class="logo content__logo"></div>
</div>

.logo{
backgroud-color: red;
}
.content__logo{
стили относящиеся к лого в контенте
}

1. Какой из вариантов быстрей сработает в браузере ?
2. Какой из вариантов правильней для проектирования ?

Comments

[Сергей delphinpro]

Человече, когда тебе на поддержку или доработку достанется код с селекторами типа (а это реальный случай из недавней практики)
.Header .TopArea .MainBox > .Search > .Button {}
ты взвоешь.

[Alexander]

Сергей: в каком смысле ? можете по подробнее ?
я бы залез в css файл и нашел бы этот стиль и изменил. Есть вариант лучше ?

[Сергей delphinpro]

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

[ZaxapKramer]

Alexander, если у вопроса есть решение, отметьте это. По самолюбию иногда бьет. Дело не в "Спасибках" и "Плюсиках", а в том, что ты тратишь свое время, чтобы помочь человеку, так или иначе, но ты даже не знаешь, помогло ли ему это, в принципе. Нет - хорошо, да - хорошо. А молчание - знак того, что все твои слова были обращены к стене.

Answer 1

[riot26]

Быстрее работает там, где меньше вложенных селекторов, а вообще: https://ru.bem.info/methodology/quick-start/

Answer 2

[ThunderCat]

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