Лучший способ выбрать элементы с помощью CSS

Question

Я прочитал все о лучшем порядке селекторов в CSS, но я часто (все время) вижу, как люди делают это ....

nav ul li#email-me a {
   width: 120px;
   height: 43px;
   background: url(images/email_me.png) no-repeat top left;
   display: block;
}

Из того, что я прочитал, я понимаю, чтоэто лучше для производительности ...

#email-me a {
   width: 120px;
   height: 43px;
   background: url(images/email_me.png) no-repeat top left;
   display: block;
}

Я что-то упустил?Второй метод лучше?Если да, то почему все используют первый метод?

Answer 1

Я часто использую первый метод, потому что

• Как уже упоминалось в некоторые другие ответы, он более конкретен.Идентификатор не всегда автоматически делает целое правило более конкретным, чем любое другое;Вы можете добавить селектор типа - или почти все, кроме универсального селектора * - к идентификатору, и он немедленно вытеснит правило с одиночным селектором идентификатора.Я не нахожу себя целенаправленно увеличивающим специфичность селектора с помощью этой техники, так как я делаю это для организации, хотя ...

• Чтобы прояснить организацию: такое правилочасто связаны с другими правилами, которые начинаются с nav ul, и это помогает визуально сгруппировать их с несколькими исходными селекторами, которые уже установлены.

  Например:

  nav ul {
      /* Styles for the ul */
  }
  
  nav ul li {
      /* Styles for the items */
  }
  
  nav ul li a {
      /* Styles for the item links */
  }
  
  /* 
   * If the selector here were just #email-me a, it'd be impossible
   * to see, right away, how it's related to the above rules, without
   * studying the markup that it applies to, and so on.
   */
  nav ul li#email-me a {
      /* Styles for the link in the #email-me item */
  }
  

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

Answer 2

Ваш второй пример, вероятно, будет работать лучше, но вопрос взвешивает производительность против context .

Например, во втором примере вы говорите:Якорный элемент, являющийся потомком любого элемента с идентификатором email-me, должен иметь стиль.Вопрос в следующем: это то, что вы на самом деле имеете в виду?

Например, если на другой странице другой элемент должен был использовать идентификатор email-me, скажем, элемент div должен ссылаться внутри него.получить тот же стиль?Это правда, что ты хочешь сказать?Если это так, то отлично.

Если нет, то действительно ли вы имеете в виду контекст, описанный в первом примере: только якоря, являющиеся потомками элемента списка с идентификатором email-me, являющиеся потомками неупорядоченного спискакоторые находятся внутри раздела навигации на странице.

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

Answer 3

Второй способ действительно не намного лучше первого с точки зрения производительности.

Согласно Mozilla , система стилей начинается с селектора клавиш (в вашем примере a) и начинает двигаться влево, пытаясь сопоставить предков каждого элемента в дереве DOM с селектором.

Это считается неэффективным, потому что система сначала находит все теги a и пересекает дерево dom каждого. Если у вас есть тысяча a тегов на вашей странице, вам нужно будет пройти через предков каждого из них в попытке сопоставить селектор. Было бы более эффективно ориентироваться на определенный идентификатор или класс.

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

Answer 4

Иногда есть особенность, которую люди пытаются преодолеть; они просто продолжают добавлять разделы в свой селектор, пока он не станет более конкретным, чем другой.

Но, скорее всего, это просто невежество и / или бездумность.

Мы лучше их! : D

Answer 5

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Читайте о специфике. Неудивительно, что многие люди делают это неправильно.

Answer 6

Это зависит от личного выбора. Небольшая защита первого селектора, который вы показали: он показывает лучшую цепочку контекста. Это может быть полезно при просмотре большого количества CSS, чтобы увидеть, как подходит этот элемент #email-me. В вашем примере я вижу, что это часть структуры nav, которая дает подсказку о том, как она используется.

С точки зрения производительности, разница очень мала (незначительно).

Однако, на мой взгляд, лучшим селектором CSS является наименее селектор CSS. Поэтому я голосую за второй.