Как задать стиль какому-то элементу, который вложен в несколько других?

Question

[andreyqin]

Если мне нужно задать стиль какому-то элементу, который вложен в несколько других, то я прописываю селекторы, начиная от корневого элемента в body и заканчивая нужным мне, например:

#wrapper #content .recommendation .recommendation_product .product_image img {  }

Получаются иногда достаточно длинные строчки. Слышал, что так неправильно, но не слышал почему. Может кто-нибудь объяснить, правильно ли я делаю?

Answer 1

[linoleum]

Во-первых - чем больше кода, тем больше ошибок. Во-вторых - такие селекторы гораздо дольше обрабатываются, почитайте о производительности селекторов frontender.info/writing-efficient-css-selectors/. В-третьих - в такой код сложнее вносить изменения, так как у селекторов будет высокая специфичность.
Как правило, селектор - это либо просто класс, либо класс + элемент, либо класс + элемент + состояние

.menu {}
.menu a {}
.menu a:hover {}

Длиннее делать не стоит.

Comments

[andreyqin]

Спасибо большое за ответ. Возник дополнительный вопрос - что лучше использовать - class или id? Лично я привык делать так - основные блокам (header, content, footer) задаю id, остальным - class. Или грамотней использовать классы для CSS, а id для JavaScript?

[linoleum]

@andreyqin сам для верстки использую только классы. Придерживаюсь облегченной версии БЭМ. Для JavaScript также рекомендкется использовать классы, но уже свои. И обычно дают префикс .js- или же имя приложения.

[tema_sun]

id для одного уникального элемента на странице, class для повторяющихся. Но это не обязательно, можно везде только class использовать.