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

11 апреля 2010. Рубрики: Рабочие заметки; автор — Княгиня.

6. Твой CSS начинается со строчек * {padding:0; margin:0;}

«16 признаков крутого верстальщика», Максим Покровский

Символ * в css называется универсальным селектором (universal selector). Универсальность состоит в том, что он означает любой элемент: правило, которое начинается с этого селектора, относится ко всем элементам страницы.

Какие объявления стоит и какие не стоит указывать в этом правиле? Например, полезны те, которые приведены в эпиграфе:

*{
  margin:0;
  padding:0;
}

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

Ещё полезное объявление:

*{
  border-collapse:collapse;
}

Убирает зазоры межды ячейками таблицы. В древности для этого надо было каждой таблице приписать атрибуты «cellspacing=0 cellpadding=0». Css позволяет убрать все зазоры у всех таблиц одной строчкой. Кстати, это свойство действует не только на табличные элементы, но и на элементы с табличными значениями свойства display: если вы хотите поставить в ряд три элемента div с помощью объявления «display:table-cell;» то можете столкнуться с непредвиденными просветами, которые не удаляются через «margin:0; padding:0;». Проблему решает свойство border-collapse.

А чего не надо приписывать универсальному селектору? Например, не стоит указывать размер шрифта в пикселях:

font-size:12px;

Потом вы можете долго ломать голову, почему элемент не наследует размер шрифта от родителя. А потому что получил его напрямую в раздаче для всех. Некоторые устанавливают размер шрифта 100%, только я так и не нашла практической пользы в таком определении.

То же самое относится к цвету шрифта. Если вы пропишете в универсальном селекторе

color:#000;

то не удивляйтесь, что потомки блока с id="red" не наследуют красный цвет из правила

#red{
  colol:red;
}

Не наследуют, потому что чувствуют себя не наследниками гордого имени «red», а частью простого народа. Свойства шрифтов практичнее указывать в селекторе элемента body.

Отзывы (11) на «Универсальный селектор»

Оставить свой отзыв »

Rapid:

апреля 15, 2010 в 17:06

Теперь я еще немного приблизился к профессиональному верстальщику.

[Ответить на этот комментарий]
Сергей М:

мая 24, 2010 в 09:03

Лучше звездочки только CSS Reset

[Ответить на этот комментарий]
Княгиня — мая 24, 2010 || 10:55
Так ведь, если я правильно понимаю, «звёздочка» может выступать как частный случай css-reset’а?

[Ответить на этот комментарий]
Сергей М:

мая 24, 2010 в 12:22

Может, не считая пробле с наследованием и тем, что она воспринимает все элементы, включая и в body, ну и по нагрузке на рендер (перебор и нахождение всех элементов). Плюс в нормальном случае перечисляем все теги, которым хотим сбрасываем, не сбрасываем маргины у тех элементов, у которых их нет.

Вот пару обсуждений на русском, к примеру, http://habrahabr.ru/blogs/webdev/28529/ и http://habrahabr.ru/blogs/webdev/34233/

[Ответить на этот комментарий]
- Княгиня:
  
  мая 24, 2010 в 12:47
  
  Ну, проблемы с наследованием есть проблемы прямизны рук верстальщика (кстати, в этой моей заметке они как раз упомянуты). Всё хочу (под впечатлением от одного треда на форуме) написать заметку про такое понятие, как «специфичность», только времени не хватает.
  
  Со сколько-нибудь существенной нагрузкой на рендер я не сталкивалась (может, просто не замеряла).
  
  А найденное по ссылкам меня порядком огорошило. Мне бы в голову не пришло делать ВСЕ элементы страницы блочными. В принципе, это можно рассматривать как дополнительный пример того, что НЕ следует писать в универсальном селекторе.
  
  [Ответить на этот комментарий]
- Княгиня:
  
  мая 24, 2010 в 13:02
  
  О, родила!.. Можно сформулировать принцип: в универсальном селекторе не следует указывать наследуемые свойства (чтобы не перебить нормальное наследование). Причём обратное неверно: не все ненаследуемые свойства можно безболезненно указывать в универсальном селекторе. Логично?
  
  [Ответить на этот комментарий]
Сергей М.:

мая 29, 2010 в 02:26

Абсолютно

В общем, проще перечислением сбрасывать, и получать от этого только достоинства без недостатков )

[Ответить на этот комментарий]
Княгиня — мая 29, 2010 || 02:37
В общем, не убедили. Перечислением — это ж сколько ж элементов придётся писать в ряд? Да ещё помнить, кому что обнулять, а кому нет, то есть «списков в ряд» получится несколько. Нет, у меня всё просто: три свойства в универсальном селекторе, а остальные по мере необходимости каждому элементу. Ссылкам — цвет и text-decoration, филдсетам – border:none, и т. д. К слову сказать, я вообще перечисления через запятую не люблю: мне удобней группировать правила не по содержанию, а по «хозяину».

[Ответить на этот комментарий]
A1ek5andr0:

февраля 2, 2011 в 21:34

Буратино дали три яблока. Два он съел. Сколько яблок осталось у Буратино? Думаете одно? Ничего подобного. Никто не знает сколько у него уже было яблок до этого. Мораль: всегда обнуляйте переменные!

[Ответить на этот комментарий]
Alexpts:

сентября 3, 2011 в 10:56

Ни о чем. Делать глобальный ресет через «универсальный» * не стоит на мой взгляд.

[Ответить на этот комментарий]
Княгиня — сентября 3, 2011 || 11:41
Ну, это на ваш, а на мой пассажи типа «это зло» есть не что иное, как магическое заклинание. На меня магия не действует. Мой опыт говорит, что однократное обнуление отступов — однозначное благо. И не надо потом вспоминать, кого пропустили в списке. Вдвойне актуально, если с вёрсткой потом будет работать другой человек (например, программист). И больше трёх правил в нём писать нет смысла. А уж правила типа font-size: 100% или font: inherit ещё менее осмысленны, хоть какой элемент ни возьми.

[Ответить на этот комментарий]

Есть что сказать? Не молчим!

	Ваше имя^* (обязательно)
	Ваш e-mail (не публикуется)
	Ваш сайт

Ваш отзыв^*

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .