Апрель 11, 2010

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

Написано в рубрике: Профессиональные заметки; 20:55

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.

Связанные сообщения:
  1. «Неплохой сайт»
  2. Настройка стилей для Mozilla Firefox (3, дополнение)
  3. Глюки и хаки: ie7

Комментарии (8)

Комментарии (8) »

  1. Rapid — апреля 15, 2010 || 17:06

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

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

  2. Сергей М — мая 24, 2010 || 09:03

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

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

    Княгиня — мая 24, 2010 || 10:55

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

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

  3. Сергей М — мая 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

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

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

  4. Сергей М. — мая 29, 2010 || 02:26

    Абсолютно =)

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

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

    Княгиня — мая 29, 2010 || 02:37

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

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

Комментировать

Вы не авторизованы. Вы можете:

Rambler's Top100