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

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

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) на «Универсальный селектор»
  1. Rapid (1 комментарий)

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

    Ответить на этот комментарий
  2. Сергей М (9 комментариев)

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

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Так ведь, если я правильно понимаю, «звёздочка» может выступать как частный случай css-reset’а?

      Ответить на этот комментарий
  3. Сергей М (9 комментариев)

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

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

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Ну, проблемы с наследованием есть проблемы прямизны рук верстальщика (кстати, в этой моей заметке они как раз упомянуты). Всё хочу (под впечатлением от одного треда на форуме) написать заметку про такое понятие, как «специфичность», только времени не хватает.

      Со сколько-нибудь существенной нагрузкой на рендер я не сталкивалась (может, просто не замеряла).

      А найденное по ссылкам меня порядком огорошило. Мне бы в голову не пришло делать ВСЕ элементы страницы блочными. В принципе, это можно рассматривать как дополнительный пример того, что НЕ следует писать в универсальном селекторе.

      Ответить на этот комментарий
    • Княгиня (652 комментария)

      О, родила!.. Можно сформулировать принцип: в универсальном селекторе не следует указывать наследуемые свойства (чтобы не перебить нормальное наследование). Причём обратное неверно: не все ненаследуемые свойства можно безболезненно указывать в универсальном селекторе. Логично?

      Ответить на этот комментарий
  4. Сергей М. (9 комментариев)

    Абсолютно =)

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

    Ответить на этот комментарий
    • Княгиня (652 комментария)

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

      Ответить на этот комментарий
  5. A1ek5andr0 (13 комментариев)

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

    Ответить на этот комментарий
  6. Alexpts (1 комментарий)

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

    Ответить на этот комментарий
    • Княгиня (652 комментария)

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

      Ответить на этот комментарий
  7. K911A (1 комментарий)

    В чем разница между:

    *{margin:0; padding:0;}

    и

    body {margin:0; padding:0;}

    ведь в обоих случаях правило будет работать для всей страницы…

    Ответить на этот комментарий
    • Княгиня (652 комментария)

      Не будет. В первом случае универсальный селектор применяет поля и отступы к каждому элементу html на странице, а во втором — только к элементу body. А поля и отступы не наследуются.

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

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

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

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.