Обращение к классам CSS. Как правильнее?

Question

[Аркадий Суздальцев]

Как правильнее обращаться к классам, элемент которого лежит в другом и тоже имеет класс?
Пример:

<div class="more">
    <div class="more_text">узнать больше об интенсиве</div>
    <img src="icons/arrow.png" alt="down arrow" class="more_img">
</div>

Суть вопроса заключается в том, что как синтаксически (в плане требований к коду и удобства) правильнее обращаться, например к классу .more_text?
Так (если ничего не путаю, то называется это вложенностью, если нет - поправьте):

.more .more_text {
    ...
}

Или так:

.more_text {
    ...
}

Comments

[Rustam Bainazarov]

Как угодно. Зависит от задачи. Изучайте специфичность. Чем меньше вложенности — тем лучше.

[Виталий Першин]

.more .more_text {
    ...
}

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

[Аркадий Суздальцев]

Виталий, благодарю

[Аркадий Суздальцев]

Рустам Байназаров, благодарю

Answer 1

[Александр]

Можно .more_text { ... }, главное чтобы класс был уникален. Также, если имеется вложенность, то при добавлении media-запросов необходимо будет повторять полную вложенность.

Answer 2

[Алексей]

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

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

Answer 3

[vitalyDinDin]

Если "more_text" уникален на все сайте, то можно напрямую обращаться к нему, просто ".more_text". Если не уникален, то ".more .more_text".