CSS: советы и приёмы, часть 1

Поскольку я широко использую CSS на протяжении 2х лет, мне запомнились несколько приёмов, которые помогают более эффективно использовать CSS и решать специфические задачи. Мне бы хотелось поделиться моими любимыми CSS-приёмами и объяснить несколько самых частых ошибок, которые совершают новички. Если у тебя есть опыт работы с CSS, то скорей всего на твоём пути уже встречались эти советы и приёмы, но кто знает, вдруг найдётся парочка новых.

С самого начала планировалось написать всё в одной статье, но советов становилось всё больше, и поэтому я разделил всё на две части для более лёгкого усвоения этого материала .

Сокращенный CSS

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

Если значение не равно 0, то всегда указывай единицу измерения

Отсутствие единицы измерения для значения длины — довольно частая ошибка среди начинающих изучать CSS. Можно избежать этого в HTML, но в CSS все значения длины должны иметь единицу измерения. Есть два исключения: line-height и значение 0 (нуль). Заметьте, что после значения обязательно должна следовать единица измерения — не надо вставлять пустое место (пробел) между ними.

Нет необходимости указывать единицу измерения для 0 (нуля). Нуль пикселей равняется нулю сантиметров или любой другой единице измерения. Не смотря на это, очень часто встречается нечто вроде padding:0px, когда можно написать padding:0, и эффект будет таким же.

Нет ничего плохого в том, чтобы добавлять к нулю единицу измерения, просто это лишний объём и, что касается меня, выглядит не аккуратно.

Помни о чувствительности к регистру

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

Значения атрибутов class и id чувствительны к регистру в HTML и XHTML, поэтому избегай смешанного регистра в именах атрибутов class и id. Если по какой-либо причине ты используешь смешанный регистр, дважды проверь идентичность регистра в CSS.

Указывай цвета

Об этом я написал в упомянутой ранее статье, но я настолько часто этим пользуюсь, что повторюсь ещё раз: когда цвет в CSS указывается в шестнадцатеричной системе счисления (hexadecimal colour notation), и когда цвет состоит из трех пар шестнадцатеричных чисел, тогда ты можешь указывать цвета более эффективно путём удаления каждого второго числа: #000 идентично #000000, #369 идентично #336699.

И не забывайте про решётку — символ “#” перед кодом цвета.

Еще один совет по цвету — ты можешь указывать безопасные для интернета цвета, используя цифры, которые делятся на 3 для красного, зелёного и синего значений: 0, 3, 6, 9, C и F. #99c является безопасным цветом, #98c не является.

Исключай типы элементов для class и id

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

Так, вместо того, чтобы писать:

div#content { /* декларации */ }
fieldset.details { /* декларации */ }

ты можешь написать:

#content { /* декларации */ }
.details { /* декларации */ }

и сэкономить несколько байтов для каждого из селекторов.

В особенности это полезно для селекторов id, так как на интернет-странице они должны быть уникальными, что снижает риск конфликта CSS-правил друг с другом. Имена классов, с другой стороны, могут быть использованы любое количество раз, и разные типы элементов могут быть присвоены для того же имени класса (или нескольких имён). Чтобы по-разному обозначить типы элементов с одинаковым именем класса, тебе необходимо будет указать тип элемента в селекторе.

Знай, что вышеприведённые CSS-правила не идентичны. Если указано одно правило без типа элемента в селекторе, а другое с типом элемента в селекторе, тогда то правило, которое использует тип элемента, будет приоритетней.

Значения по умолчанию

Часто ты можешь не указывать значение свойства, опираясь на значение по умолчанию этого свойства. Особенно это важно учитывать, когда ты пользуешься сокращёнными свойствами, так как к любому неуказанному свойству присваивается соответствующее этому свойству значение по умолчанию.

Распространёнными значениями по умолчанию являются 0 для padding (правда есть несколько исключений), и transparent для background-color.

В разных браузерах есть отличия между значениями по умолчанию. Некоторые люди предпочитают использовать в начале CSS-файла глобальный сброс через обнуление свойств margin и padding для всех элементов.

* {
margin:0;
padding:0;
}

Не указывай заново унаследованные значения

Значения многих свойств наследуются любым потомком элемента, для которого указывается свойство. Родственные свойства color и font являются самым ярким примером таких свойств.

Знай, что некоторые свойства могут быть проигнорированы заранее определённым CSS (например значения браузера по умолчанию). Поэтому следующее правило не делает все заголовки нежирными:

body { font-weight:normal; }

Предопределённые правила браузера более специфичны.

Воспользуйся преимуществом каскада

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

<p class="update">Update: Lorem ipsum dolor set</p>

В CSS можно использовать одни правила, подходящие для всех элементов p, и другие правила, которые применяются только для элементов p с классом update:

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

Оба правила будут скомбинированы для элементов p с классом update. Класс селектора более важен, чем тип селектора, поэтому, когда происходит конфликт, будут использоваться свойства, определённые во втором правиле. В данном случае color:#600;.

О том как подсчитываются CSS-правила можно найти в вычислении специфики селектора в спецификации CSS 2.1.

Несколько имён классов

Одному элементу можно присваивать несколько имён классов. Это позволяет прописывать несколько правил, и применять их только по необходимости. Давай предположим, что ты пишешь код галереи картинок, которая содержит авторские и не авторские картинки. Ещё могут быть специальные предложения для некоторых картинок. Код для трёх картинок следующий:

<img src="foo.gif" class="special" alt="" />
<img src="bar.gif" class="royaltyfree" alt="" />
<img src="baz.gif" class="royaltyfree special" alt="" />

Чтобы авторские картинки отличались от остальных, ты можешь создать правило для элементов, класс которого будет называться royaltyfree, а если ты хочешь, чтобы картинки со специальным предложением немного выделялись, то ты можешь создать класс special.

Далее CSS может выглядеть так:

.royaltyfree { border:2px solid #666; }
.special {
padding:2px;
background:#ff0;
}

Любая картинка с классом special будет окружена пространством в 2 пикселя и задним фоном жёлтого цвета. Картинки с классом royaltyfree будут иметь кромку в 2 пикселя, а картинки с обоими классами будут иметь все три свойства — кромку, пространство и жёлтый фон.

Можно на этом не останавливаться — это только пример. Старайся использовать семантически правильные имена классов, которые описывают то, что делает элемент, а не то, как он выглядит.

Используй селекторы потомков

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

<div id="subnav">
<ul>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
</ul>
</div>

Этот код может сопровождаться следующим CSS:

div#subnav ul { /* Обозначения стиля */ }
div#subnav ul li.subnavitem { /* Обозначения стиля */ }
div#subnav ul li.subnavitem a.subnavitem { /* Обозначения стиля */ }
div#subnav ul li.subnavitemselected { /* Обозначения стиля */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Обозначения стиля */ }

Вышеприведённый пример неэффективен. Далее следует пример эффективного кода:

<ul id="subnav">
<li><a href="#">Item 1</a></li>
<li class="sel"><a href="#">Item 1</a></li>
<li><a href="#">Item 1</a></li>
</ul>

и этим CSS:

#subnav { /* Обозначения стиля */ }
#subnav li { /* Обозначения стиля */ }
#subnav a { /* Обозначения стиля */ }
#subnav .sel { /* Обозначения стиля */ }
#subnav .sel a { /* Обозначения стиля */ }

Твой код должен быть как можно чище. Это позволяет сделать код интернет-страницы и код CSS более эффективными и удобочитаемыми.

Избегай кавычек в ссылках

Чтобы сэкономить парочку байтов, я не ставлю кавычки в ссылках для картинок заднего фона. Кавычки не обязательны. В некоторых браузерах (в большинстве случаев Internet Explorer на Макинтоше) появляются проблемы, когда ссылки заключены в кавычки.

Продолжение следует

Нет твоего любимого совета по CSS? Расслабься, продолжение следует — CSS советы и приёмы, часть 2.

— перевод: umade.ru | оригинал на английском: CSS tips and tricks, Part 1