Стиль CSS-селектора

Question

Простой вопрос, и, вероятно, отражает мою неопытность с CSS, но ...

При создании таблицы стилей мне нравится явно указывать подстановочный знак '*', поэтому:

*.TitleText {

вместо

.TitleText {

Я считаю, что это напоминает мне, что TitleText применяется к «любому» тегу и может быть переопределен последующим h1.TitleText. Может быть, мне просто нравится это, потому что в течение долгого времени я не понимал всю эту концепцию селектора CSS должным образом, и когда я понял, что второе (выше) было просто сокращением для первого, многие вещи «щелкнули».

Является ли то, что я делаю, плохой практикой, хорошей практикой или ни здесь, ни там?

Answer 1

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

Answer 2

Хотя оба варианта эквивалентны по стилевому результату, необходимо учитывать еще пару факторов.

Использование * увеличивает размер файла

Если вы не используете минимизатор CSS (удаляет ненужные данные, такие как лишние пробелы), который удаляет ненужные звездочки, использование * каждый раз, когда тег не указан, приводит к появлению в файле значительного количества дополнительных символов, которые приведет к увеличению времени загрузки (и большему использованию полосы пропускания). Хотя я бы не стал просматривать большой файл и удалять уже имеющиеся звездочки (если у вас действительно нет времени для этого и вам не нравятся утомительные задачи, которые могут привести к ошибке, которую вы не обнаружите годами), я бы предложил не включать ненужные звездочки при написании новых стилей и удалении ненужных звездочек при редактировании старых стилей.

Использование * может привести к путанице

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

Пример

/** 
 * This matches an element with the class `alert` within
 * any element within an `article` element
 */
article * .alert { /* ... */ }

против

/** 
 * This matches an element with the class `alert` within
 * an `article` element
 */
article *.alert { /* ... */ }

Если в проекте 100% согласованность (и стиль известен всем, кто работает над проектом), то первый пример никогда не произойдет (вместо этого будет article * *.alert). Тем не менее, это идеальная ситуация, которая, скорее всего, развалится после нескольких поколений разработчиков (вместо этого люди любят использовать свой собственный стиль). Таким образом, даже если у вас есть согласованный стиль, новый сотрудник может на короткое время написать и написать в своем собственном стиле или неправильно прочитать текущий стиль и создать код, который не соответствует селекторам (или наоборот). Поэтому я бы предложил придерживаться стандарта, который я видел больше всего (читай: исключительно ) в проектах и ​​на сайтах:

Не не используйте звездочку, если она не требуется .

Беглый взгляд на источник некоторых известных веб-сайтов (например, Facebook, Google, Yahoo и т. Д.) Покажет, что они не используют звездочки, если не обязаны (даже в своих не минимизированных стилях). Вы также можете взглянуть на некоторые проекты с открытым исходным кодом на GitHub .

Заключение

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

Answer 3

Согласно спецификации CSS :

5.3 Универсальный селектор

Универсальный селектор с надписью "*", соответствует имени любого типа элемента. Это соответствует любому отдельному элементу в дерево документов.

Если универсальный селектор не единственный компонент простого селектора, «*» может быть опущено. Например:

• *[lang=fr] и [lang=fr] эквивалентны.
• *.warning и .warning эквивалентны.
• *#myid и #myid эквивалентны.

Следовательно, .TitleText и * .TitleText эквивалентны. Крайне маловероятно, что любая реализация будет иметь оценку производительности для * .xxx, которого нет для .xxx.

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

Answer 4

Это ни хорошо, ни плохо, но (полностью) избыточно.

РЕДАКТИРОВАТЬ: На самом деле, это плохо, потому что это может сбить с толку (как для людей, а не парсеры).

Answer 5

Лично я склонен использовать * только при применении правила ко всем тегам. Это избыточно в случае * .class {}, но полезно в случае .class * {}.

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

Answer 6

РЕДАКТИРОВАТЬ: это указывает на то, что вполне может быть проблема производительности. Некоторые люди, казалось, думали, что я был чем-то вроде разглагольствования ...

---

Хотя я не знаю наверняка, я бы хотел предупредить! Рассмотрим следующий идентификатор:

div#foo a.bar {}

Я слышал, что, например, jQuery, который использует css, в приведенном выше примере сначала обходит DOM в поисках div, а затем проверяет, есть ли у них идентификатор #foo, затем для тега A, прежде чем наконец увидеть Классифицированный .bar.

Моя проблема с * в том, что браузер может проходить через DOM в поисках ВСЕХ тегов и затем искать .bar, а не просто искать атрибут «bar» - это два цикла DOM, а не просто один. Разница может быть крайне минимальной, но если ваш синтаксис попадает в эфир, нам нужно установить еще несколько солнечных панелей.

Answer 7

С точки зрения спецификаций CSS ваши два примера имеют одинаковое значение. Тем не менее, есть потенциальные проблемы с этим на практике. Самым большим, что я вижу, является то, что некоторые браузеры могут неправильно обращаться с * с точки зрения взвешивания правил и, таким образом, потенциально отбрасывать приоритет (хотя я не знаю ни одного, вне головы, которые делают это - это просто меня не удивит) Также широко распространено мнение, хотя я не могу процитировать для вас главы и стихи, что селекторы класса всегда должны включать определенное имя тега по соображениям производительности. Очевидно, быстрее применить селектор класса с именем тега (span.foo), чем без него, и быстрее применить селектор идентификатора без имени тега (#bar), чем с.

Answer 8

*. Class перезапишет span.class, даже если span.class более важен.

Я не вижу практического использования для * .class, перезаписи должны выполняться с! Важным заявлением и только редко.

Единственная причина, по которой я использую *, состоит в том, чтобы удалить все отступы и поля, я фактически всегда делаю это, это первое утверждение CSS, которое я записываю всегда:).

Существует также немало хаков CSS, основанных на том, что "* html" не работает в IE6 и ниже.

Я бы пометил это как плохую практику.

Answer 9

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

Answer 10

Это было бы излишним, если допустить, что * означает, что 'все, что есть в мире', не имея *, будет также означать то же самое. Я обычно использую * {margin: 0; padding: 0} в undo.css для сброса полей и отступов, но не в качестве псевдоселектора.