Иерархические селекторы, как это запомнить?

Question

[kq1995]

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

Скажите, это сильно плохо если я вместо этих селекторов буду в 80% случаев использовать классы? Насколько это плохо и неправильно?

PS может в среде разработки, как вебшторм, есть какие-то функции или плагины чтобы я мог например нажать на тег и получить путь к нему не используя классов (чтобы задать стиль именно ему)?

Comments

[Вадим]

Селектор может быть по классам тоже.
И у селекторов по классам тоже может быть иерархия.

Answer 1

[Кирилл Резанов]

В иерархии всё не так сложно
Такая запись:
elem elem2
Будет означать, что ты будешь искать все elem2 в elem
Такая запись
elem > elem2
Будет означать то, что ты будешь искать все elem2 только на одном уровне, т.е. когда у тебя elem2 находится сразу после elem, а не вложен в другие дочерние элементы elem
Можно использовать классы, насколько я знаю, это практикует БЭМ, но можно это комбинировать, использовать классы и иерархические селекторы
Пара примеров из моих проектов:
footer .contacts
Мы ищем все элементы .contacts в элементе footer
footer .contacts .row
Мы ищем все элементы .contacts в footer и все элементы .row в .contacts

Comments

[Вадим]

elem > elem2
Будет означать то, что ты будешь искать все elem2 только на одном уровне, т.е. когда у тебя elem2 находится сразу после elem, а не вложен в другие дочерние элементы elem

elem2 непосредственно в(а не после) elem, то есть непосредственный ребёнок первого уровня, то есть когда elem2 вложен именно в elem и не во что другое.

Мы ищем все элементы .contacts в footer и все элементы .row в .contacts

Ищем все .row во всех .contacts которые в footer

Answer 2

[Иван В]

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

Comments

[posters]

А потом появится задача натянуть шаблон на WordPress и начнутся пляски с бубном...