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

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

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

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

Я думаю, что * неявно, поэтому они делают то же самое.

Я не уверен, но это может вызвать некоторые проблемы, если вы сделаете это так:

span.style { color: red; }
*.style { color: blue; }

Стиль *, вероятно, переопределит стиль диапазона. Я могу ошибаться, поскольку span.style - более конкретный селектор.

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

Я имею в виду, что он работает для селекторов классов, но не подходит для селекторов ID. Например:

span#id { ... }
*#id { ... }

... и он больше не похож на синтаксис Shell. :) Лично я бы не стал делать это так, как вы, потому что это может сбивать с толку, но я не думаю, что вы что-то ломаете.

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

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

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

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

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

Обновлено: На самом деле, мне кажется, это плохо, потому что это потенциально сбивает с толку (как для людей, а не для парсеров).

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

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

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

Есть также довольно много хаков css, основанных на "* html", которые не работают в IE6 и ниже.

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

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

Обновлено: это указывает на то, что вполне может быть проблема с производительностью. Некоторые люди, казалось, думали, что я что-то собираюсь сбежать оттуда ...

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

div#foo a.bar {}

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

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

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

5.3 Universal selector

The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.

If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:

• *[lang=fr] and [lang=fr] are equivalent.
• *.warning and .warning are equivalent.
• *#myid and #myid are equivalent.

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

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

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

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

Если вы не используете 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 для сопоставления абзацев, у которых есть родительский элемент, отличный от тела). Это не только неписаный стандарт (и менее вероятно, что он вызовет путаницу), но он также уменьшает размер файла таблиц стилей, что увеличивает скорость загрузки веб-сайта.