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.
15 комментариев на «Универсальный селектор»
Rapid (1 комментарий)
Теперь я еще немного приблизился к профессиональному верстальщику.
Сергей М (9 комментариев)
Лучше звездочки только CSS Reset
Княгиня (660 комментариев)
Так ведь, если я правильно понимаю, «звёздочка» может выступать как частный случай css-reset’а?
Сергей М (9 комментариев)
Может, не считая пробле с наследованием и тем, что она воспринимает все элементы, включая и в body, ну и по нагрузке на рендер (перебор и нахождение всех элементов). Плюс в нормальном случае перечисляем все теги, которым хотим сбрасываем, не сбрасываем маргины у тех элементов, у которых их нет.
Вот пару обсуждений на русском, к примеру, http://habrahabr.ru/blogs/webdev/28529/ и http://habrahabr.ru/blogs/webdev/34233/
Княгиня (660 комментариев)
Ну, проблемы с наследованием есть проблемы прямизны рук верстальщика (кстати, в этой моей заметке они как раз упомянуты). Всё хочу (под впечатлением от одного треда на форуме) написать заметку про такое понятие, как «специфичность», только времени не хватает.
Со сколько-нибудь существенной нагрузкой на рендер я не сталкивалась (может, просто не замеряла).
А найденное по ссылкам меня порядком огорошило. Мне бы в голову не пришло делать ВСЕ элементы страницы блочными. В принципе, это можно рассматривать как дополнительный пример того, что НЕ следует писать в универсальном селекторе.
Княгиня (660 комментариев)
О, родила!.. Можно сформулировать принцип: в универсальном селекторе не следует указывать наследуемые свойства (чтобы не перебить нормальное наследование). Причём обратное неверно: не все ненаследуемые свойства можно безболезненно указывать в универсальном селекторе. Логично?
Сергей М. (9 комментариев)
Абсолютно
В общем, проще перечислением сбрасывать, и получать от этого только достоинства без недостатков )
Княгиня (660 комментариев)
В общем, не убедили.
Перечислением — это ж сколько ж элементов придётся писать в ряд? Да ещё помнить, кому что обнулять, а кому нет, то есть «списков в ряд» получится несколько. Нет, у меня всё просто: три свойства в универсальном селекторе, а остальные по мере необходимости каждому элементу. Ссылкам — цвет и text-decoration, филдсетам — border:none, и т. д. К слову сказать, я вообще перечисления через запятую не люблю: мне удобней группировать правила не по содержанию, а по «хозяину».
A1ek5andr0 (13 комментариев)
Буратино дали три яблока. Два он съел. Сколько яблок осталось у Буратино? Думаете одно? Ничего подобного. Никто не знает сколько у него уже было яблок до этого. Мораль: всегда обнуляйте переменные!
Alexpts (1 комментарий)
Ни о чем. Делать глобальный ресет через «универсальный» * не стоит на мой взгляд.
Княгиня (660 комментариев)
Ну, это на ваш, а на мой пассажи типа «это зло» есть не что иное, как магическое заклинание. На меня магия не действует. Мой опыт говорит, что однократное обнуление отступов — однозначное благо. И не надо потом вспоминать, кого пропустили в списке. Вдвойне актуально, если с вёрсткой потом будет работать другой человек (например, программист). И больше трёх правил в нём писать нет смысла. А уж правила типа font-size: 100% или font: inherit ещё менее осмысленны, хоть какой элемент ни возьми.
K911A (1 комментарий)
В чем разница между:
*{margin:0; padding:0;}
и
body {margin:0; padding:0;}
ведь в обоих случаях правило будет работать для всей страницы…
Княгиня (660 комментариев)
Не будет. В первом случае универсальный селектор применяет поля и отступы к каждому элементу html на странице, а во втором — только к элементу body. А поля и отступы не наследуются.