Подходят ли вложенные идентификаторы в CSS?

Question

Я пытался составить собственное мнение по этому вопросу, но не смог, поэтому решил спросить.

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

Давайте рассмотрим простую структуру, подобную этой:

#content
  form#search-filters
     #datepicker
  #search-results

Когда речь идет о стилизации этого кода, у вас есть два основных подхода (я использую scss и примеры):

1. Организовать это иерархически, например,

   #content {
     columns(8, 12);
     #search-filters {
        @include search-filters;
         etc.
   

2. Перейти с простыми декларациями

   #content {
     columns(8, 12);
   }
   #search-fiters {
     @include search-filters;
   

И, на мой взгляд, чертовски круто иметь его с первого взгляда, хотя это как-то противоречит всей логике.

Вопрос остается в силе с содержимым этого блока # search-filters, как показано в примере выше. Допустим, вы использовали некоторые леса Rails, которые генерировали идентификаторы для каждого элемента формы, в которой размещены фильтры, и вы хотите обратиться к этим идентификаторам, чтобы также обеспечить стилизацию. Вы знаете, что элемент уникален и что он будет уникальным в любой форме, которая расширяет смесь поисковых фильтров. Итак, вы хотите, чтобы он имел идентификатор. Но вы должны дать ему класс, чтобы сделать его логически непротиворечивым.

Что вы думаете об этой проблеме?

P.S. Я попытался прочитать спецификацию о том, есть ли разница в производительности в этих двух случаях, но ничего не сказано: http://www.w3.org/TR/css3-selectors/#class-html

Answer 1

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

Кроме того, отсутствие вложенных CSS-селекторов снижает специфичность и позволяет вам легче переопределять ее для определенных случаев.

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

Answer 2

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

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

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