Как писать селекторы должным образом?

Question

[nluparev]

Привет.

Я начинающий Front-end developer и хочеться с самого начала приобретать хорошие привычки которые будут делать мою жизнь проще в будущем.

Я хочу что бы Вы, опытные и знающие коллеги, дали мне некоторые рекомендации касательно так как я должен писать CSS селекторы. Я понимаю что структура HTML то же важна, так что если считаете что надо упомянуть что-то важное то скажите пару слов и про неё.

Я хочу создавать сложные веб-приложения с большим кол-ом JS кода на клиенте и считаю что Ваши ответы будут как минимум полезны.

Вот примерные направления, но Вы ими не ограничены:

• Я слышал, что надо писать более производительные селекторы (все-таки обход дерева каждый раз как никак)
  
• больше использовать комбираторы. Серьёзно?
  
• селекторы на основе аттрибутов
  
  

Спасибо заранее за любой совет.

Answer 1

[Сергей Протько]

Я слышал, что надо писать более производительные селекторы

Не загоняйтесь по этому поводу, у вас есть профайлер в браузере и как сделаете уже можно заниматься оптимизациями.

больше использовать комбираторы. Серьёзно?

А почему нет? Основная проблема - изоляция стилей. То есть как сделать так, что бы имезения в стилях для блока A не влияли на блок Б. Рекомендую вам так же ознакомиться с популярными методологиями верстки (серьезно, чем раньше тем лучше), например БЭМ, smacss, oocss и т.д.

селекторы на основе аттрибутов

Для JS очень удобно на основе data-* атрибутов делать селекторы. В целом в этом плане можно посмотреть в сторону webcomponents и как-то ориентироваться на этот путь.

Comments

[nluparev]

Отличный ответ. Спасибо за помощь, всё отлично расталковано. За различные методологии верстки отдельное спасибо

[nluparev]

а можно чуть больше про сказать webcomponents? Я погуглил, но не совсем понял что это такое и чем оно полезно

[Сергей Протько]

nluparev: это стандарт, согласно которому, браузер предоставляет вам возможность создавать свои элементы со своим поведением. Изолированные. То есть вам нужно автокомплит - не вопрос, добавляете такой компонент и используете просто прописав в html соответсвующий элемент или атрибут для инпута. Суть в снижении связанности и изоляции функционала.