CSS: советы и приёмы, часть 1
С самого начала планировалось написать всё в одной статье, но советов становилось больше, и поэтому я разделил всё на две части для более легкого усвоения этого материала.
Если значение не равно 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;
}
Продолжение
Данная статья разрешена для публикации только на http://visavi.net/