С самого начала планировалось написать всё в одной статье, но советов становилось больше, и поэтому я разделил всё на две части для более легкого усвоения этого материала.
Если значение не равно 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 являются самым ярким примером таких свойств. Знай, что некоторые свойства могут быть перезаписаны специфическими каскадными стилями пользовательских агентов (ПА) браузеров, например значения браузера по умолчанию. Поэтому, используя следующее правило, ты не можешь сделать все заголовки нежирными:
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. Больше информации о том, как подсчитываются CSS-правила можно найти в Вычислении специфики селектора в спецификации CSS 2.1.
Несколько имён классов
Ты можешь присвоить несколько имён классов к одному элементу. Это позволяет тебе писать несколько правил, которые определяют разные свойства, и применять их только по необходимости. Давай предположим, что ты пишешь код галереи картинок, которая содержит авторские и не авторские картинки. Ещё может быть специальное предложение для некоторых картинок. Код для трёх картинок следующий:
Чтобы авторские картинки отличались от остальных, ты можешь создать правило для элементов, класс которого будет называться royaltyfree, и если ты хочешь, чтобы картинки со специальным предложением немного выделялись, то ты можешь создать класс special. Далее CSS может выглядеть на подобии этого:
.royaltyfree { border:2px solid #666; }
.special {
padding:2px;
background:#ff0;
}
Любая картинка с классом special будет иметь вокруг себя пространство в 2 пикселя и задний фон жёлтого цвета. Картинки с классом royaltyfree будут иметь кромку в 2 пикселя, а картинки с обоими классами будут иметь кромку, пространство и жёлтый фон. Можно на этом не останавливаться – это только пример. И постарайся использовать семантически правильные имена классов, которые описывают то, что делает элемент, а не то, как он выглядит.
Используй селекторы потомков
Не использовать селекторы потомков – это один из самых распространенных примеров неэффективного использования CSS, который я вижу от новичков. Селекторы потомков могут помочь тебе обойтись без многих атрибутов класса, и сделать твои CSS-селекторы более эффективными. Для примера можно взять следующую структуру кода:
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</li>
<li class="sel"><a href="#">Item 1</a></li>
<i><a href="#">Item 1</a></li>
<ul>
и этим CSS:
#subnav { /* Обозначения стиля */ }
#subnav li { /* Обозначения стиля */ }
#subnav a { /* Обозначения стиля */ }
#subnav .sel { /* Обозначения стиля */ }
#subnav .sel a { /* Обозначения стиля */ }
Твой код должен быть как можно чище. Это позволит сделать код страницы и CSS более эффективным и удобочитаемым.
Избегай кавычек в ссылках
Чтобы сэкономить парочку байтов здесь и там, я не заключаю ссылки для картинок заднего фона в кавычки. Кавычки не обязательны. Есть сведения о том, что в некоторых браузерах (в большинстве случаев Internet Explorer на Макинтоше) появляются проблемы, когда ссылки заключены в кавычки.
Продолжение следует
Я забыл написать о твоём любимом совете по CSS? Расслабься, продолжение следует.
