Smashing Magazine
Работа с
CSS не всегда проста. Конечно, все зависит
от опыта и навыков, но иногда CSS кодинг
может превращаться в кошмар. Лучший способ упростить код это полезные,
но не очень известные свойства и атрибуты которые можно использовать
для создания семантически корректной
разметки. Мы обратили свой взгляд на наиболее
интересные и полезные техники CSS кодинга
и перечислили их в этой статье. Также мы включили некоторые базовые
техники, используемые многими в каждом проекте, но которые трудно
найти, когда они нужны. Это обзор 70 техник
предложенных экспертами CSS, вы должны
быть готовы пройти по списку ссылок и похожих публикаций в конце
статьи. Мы хотим сказать спасибо всем разработчикам,
которые делятся своими идеями, техниками, методами, знаниями и опытом с
их читателями.
1.1 Кодинг:
НачинаемКогда дизайн готов, начните с
пустой страницы. Добавьте заголовки, навигацию, пример
содержимого, и футер, потом добавьте html
разметку и только после этого CSS. [CSSing] Сначала
сбросьте стили по умолчанию. Часто нет необходимости
задавать значение какого либо свойства, потому что есть значение по
умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и
поля всех элементов в самом начале файла
стилей. Используйте главный файл
стилей. Одна из наиболее распространенных ошибок
новичков в том, что они забывают сбросить стили по умолчанию, это
является причиной несоответствия оформления в различных браузерах.
Браузеры тут не причем, прежде чем начать писать CSS следует сбросить
стили по умолчанию. [Master
Stylesheet: The Most Useful CSS Technique], [Ryan
Parr] master.css Code @import
url("reset.css");
@import url("global.css");
@import
url("flash.css");
@import
url("structure.css");
<style type="text/css"
media="Screen">
/*\*/ @import url("css/master.css");
/* Fix IE. Hide from IE Mac */
</style>Создайте библиотеку вспомогательных
классов. Полезные для отладки они должны быть исключены
в окончательной версии (разделяйте разметку
и оформление). Можно использовать сразу несколько имен классов
(<p class="floatLeft alignLeft
width75">...</p>) [Richard
K. Miller] Code .width100 { width: 100%;
}
.width75 {width: 75%;}
.width50 {width:
50%;}
.floatLeft {float: left;}
.floatRight {float:
right;}
.alignLeft {text-align: left;}
.alignRight
{text-align:
right;}
1.2
Организация CSSИспользуйте главный файл
стилей. Организация CSS упрощает поддержку сайта.
Начните с главного файла стилей в нем импортируйте
reset.css,
global.css,
flash.css (если
нужен) и
structure.css и
возможно файл настроек типографики. Code h2 { }
#snapshot_box h2
{
padding: 0 0 6px 0;
font: bold 14px/14px "Verdana",
sans-serif;
}
#main_side h2 {
color:
#444;
font: bold 14px/14px "Verdana",
sans-serif;
}
.sidetagselection h2 {
color:
#fff;
font: bold 14px/14px "Verdana",
sans-serif;
}Используйте флаги.
Разделяйте файл CSS на секции, например, Global Styles – (параграфы,
списки и т.д.), Header, Page
Structure, Headings,
Text Styles,
Navigation,
Forms,
Comments,
Extras. [5
Tips for Organizing Your CSS] Code /*
-----------------------------------*/
/*
---------->>> GLOBAL
<<<-----------*/
/*
-----------------------------------*/ Создавайте таблицу
содержимого. В начале файла CSS, создайте таблицу
содержимого. Стоит выделить различные разделы
(header,
main, footer
etc), разделитель разделов должен быть хорошо заметным. [5
Steps to CSS Heaven] Упорядочивайте свойства в алфавитном
порядке. Не знаю, кто подал мне эту идею, но я
упорядочиваю свойства в алфавитном порядке, это упрощает их поиск.
[Christian
Montoya] Code body
{
background:#fdfdfd;
color:#333;
font-size:1em;
line-height:1.4;
margin:0;
padding:0;
}Разделяйте код на
блоки. Для многих это очевидно, но иногда я все же
встречаю CSS не разделенные на блоки. Эта не сложная операция
значительно упрощает работу с кодом недели, месяцы и годы спустя.
Примеры: "/* Structure */, /* Typography */ etc." [CSS
Tips and Tricks] Используйте
хуки. Несмотря на то, что вы разделяете CSS на блоки, не
помешает и использование структурированных хуков. [CSS
Tips and Tricks] Разделяйте
файл CSS на блоки. Я разделяю код на три разных блока, в
первом определения для отдельных элементов, тела документа, ссылок,
заголовков, сброс параметров по умолчанию, после этого идет блок с
определениями для классов, третьим идет блок, в котором определены
стили для основных контейнеров, я создаю определения для контейнеров,
даже если они не содержат никаких правил. [Jonathan
Snook]
1.3 Кодинг:
Работа с идентификаторами, классами, селекторами и
свойствамиСводите число контейнеров к
минимуму. Предохраняйте структуру документа от
разрастания. Новички часто используют много div`ов как будто это ячейки
таблицы, не повторяйте эту ошибку, используйте и другие элементы для
создания разметки. Обдумайте все возможности прежде чем добавлять новый
div, часто можно избежать этой необходимости используя некоторые
свойства CSS. [Ryan
Parr] Сводите к минимуму
число свойств. Работайте умнее, а не тяжелее с CSS. Это
правило включает несколько подправил: если не уверенны нужно ли
добавлять свойство не добавляйте его, если не уверены, зачем добавляете
свойство не добавляйте его, если видите, что свойство используется в
разных местах, подумайте нельзя ли его добавить только один раз. [CSSing] Сводите
к минимуму число селекторов. Исключите необязательные
селекторы. Чем меньше используется селекторов, тем меньше селекторов
необходимо для переназначения стилей и тем проще исправить проблемы.
[Jonathan
Snook] Сведите к минимуму
количество хаков. Используйте только хорошо известные и
документированные ошибки в браузерах. Часто мне приходится видеть хаки
там, где они не нужны, поэтому прежде чем использовать хак исследуйте
свою проблему (в этом вам может помочь Google). [10
Quick Tips for an easier CSS
life] Используйте константы
для ускорения разработки. Константы это фиксированные
значения, которые можно использовать в коде. Один из способов обойти
отсутствие констант в CSS, использовать комментарии в начале файла,
чтобы определить «константы». Очень удобно определять, таким образом,
цвета и быстро заменять их значения по всему документу с помощью
«поиска и замены». [Rachel
Andrew] Code # /*
# Dark grey (text):
#333333
# Dark Blue (headings, links) #000066
# Mid
Blue (header) #333399
# Light blue (top navigation)
#CCCCFF
# Mid grey: #666666
#
*/ Используйте систему
имен. Использование системы для имен идентификаторов и
классов может сохранить много времени при исправлении багов, и
обновлении документов. В больших CSS документах можно быстро
запутаться, если имена абсолютно разные и не придерживаются системы
правил. Я рекомендую использовать паттерн parent_child. [10
CSS Tips] Давайте классам и
идентификаторам семантические имена. Необходимо
исключить имена, отражающие оформление. Если назвать элемент
«right-col», всегда есть вероятность что после изменения CSS
«right-col» будет отображаться с левой стороны страницы, в таком случае
недоразумения неизбежны, лучше исключить имена отражающие оформление.
[Garrett
Dimon] Группируйте селекторы
с общими атрибутами. Если несколько элементов, классов
или идентификаторов используют одно и то же свойство, можно
сгруппировать селекторы чтобы не указывать это свойство несколько раз.
[Roger
Johansson] Изолируйте
свойства, которые собираетесь использовать несколько
раз. Если необходимо часто использовать одно и то же
свойство, изолируйте его чтобы не повторять каждый раз, к тому же это
даст возможность изменять оформление всех элементов сайта использующих
его. [5
Steps to CSS
Heaven] Используйте
идентификаторы и классы как можно выше в иерархии
документа. По возможности, используйте комбинированные
селекторы, не бойтесь использовать длинные селекторы. Длинные
селекторы могут сделать CSS более понятным и уменьшают шансы class- или
div-
мании. [Chric
Casciano] Учитесь
использовать каскадную природу CSS. Представьте, что у
вас есть два похожих элемента с минимальными отличиями - вы можете
создать CSS для каждого из них, или создать один CSS для обоих, а потом
использовать дополнительные свойства, чтобы один из них выглядел иначе.
[5
Steps to CSS
heaven] Используйте теги
<small>,
<em>
и <strong>.
Иногда нужно выделить часть текста, в таком случае
не стоит использовать div или классы, используйте
семантические теги. [Mike
Rundle’s 5 CSS
Tips]
1.4 Кодинг:
Используйте сокращенияКраткие шестнадцатеричные
представления цвета. В шестнадцатеричных
представлениях цветов, которые состоят из трех пар одинаковых
цифр, можно пропустить каждую вторую цифру,
#000 то же самое что
и #000000,
#369 то же самое что
и #336699. [Roger
Johansson] Определяйте псевдо
классы для ссылок в порядке
LoVe/HAte:Link,
Visited,
Hover,
Active. Чтобы
упорядочить определения псевдо классов для ссылок размещайте
их в порядке
«link-visited-hover-active», или если
короче «LVHA». Псевдо класс
«focus», может быть помещен
в конце этого списка, но прочитайте это объяснение,
прежде чем использовать его. [Eric
Meyer] Code a:link {color:
blue;}
a:visited {color: purple;}
a:hover {color:
purple;}
a:active {color:
red;}Определяйте margin, padding
или border в порядке
TRouBLed:Top,
Right,
Bottom,
Left. При использовании стенографических
свойств margin,
padding или
border,
располагайте значения по часовой стрелке, начиная сверху:
Top,
Right,
Bottom,
Left. [Roger
Johansson] Используйте стенографические
свойства. Используйте стенографические
свойства margin,
padding,
font,
border
и другие. Code margin: top right bottom
left;
margin:1em 0 2em 0.5em;
(margin-top:
1em;
margin-right: 0;
margin-bottom:
2em;
margin-left:
0.5em;) Code border:width style
color;
border:1px solid
#000; Code background: color image repeat
attachment position;
background:#f00 url(background.gif)
no-repeat fixed 0 0; Code font: font-style (italic/normal)
font-variant (small-caps)
font-weight font-size/line-height
font-family;
font: italic small-caps bold 1em/140% "Lucida
Grande",sans-serif;
1.5
Кодинг: ТипографикаЧтобы работать с em
как с px, установите font-size для тега body
62.5%. Размер шрифта по умолчанию
16px используя это правило,
мы задаем величину em равную примерно 10px (16 x
62.5% = 10). Это позволяет легко задавать в em
размеры соответствующие пиксельным величинам, к примеру 1.3em
примерно равно 13px. [Jonathan
Snook] Используйте
универсальную кодировку символов. Хотелось
бы использовать одну универсальную кодировку символов
подходящую для большинства случаев. К счастью она существует,
это UTF-8, которая основана
на Unicode. Установить кодировку страницы можно
с помощью следующего кода. [20
pro tips] Code <meta
http-equiv="content-type" content="text/html;charset=utf-8"
/> Управляйте регистром
с помощью CSS. Если нужно чтобы текст был
написан заглавными буквами, вместо того чтобы переписывать его
позвольте сделать эту работу CSS. Следующий код трансформирует все
заголовки в верхний регистр. [20
pro tips] Code h1 {text-transform:uppercase;}
Используйте малые прописные
с помощью CSS. Свойство
font-variant
используется для вывода текста малыми прописными, это значит что все
буквы в нижнем регистре будут преобразованы
в заглавные, но с меньшим размером
шрифта Code h1
{font-variant:small-caps;}Предусматривайте все
возможности — указывайте тип шрифта. Когда указан
конкретный шрифт, который должен использоваться в дизайне, это
делается в надежде на то, что этот шрифт установлен
у пользователя, но нужно предусмотреть
и случай когда необходимого шрифта нет, для этого можно
определить альтернативные шрифты, как показано ниже, очень важно
закончить список типом необходимого шрифта. [Getting
into good coding habits] Code p
{font-family:Arial,Verdana,Helvetica,sans-serif;}Используйте 1.4em - 1.6em для
высоты строки. Чтобы сделать текст читабельным
используйте
line-height:1.4em,
длину строк около 10 слов, и достаточно контрастные цвета.
Чисто черный на белом фоне слишком контрастен для ярких CRT
дисплеев, я стараюсь использовать чуть затемненный белый
#fafafa
и темно серый
#333333. [Christian
Montoya] Устанавливайте
размер шрифта 100.01% для элемента html. Значение
100.01% для размера шрифта компенсирует
несколько багов в различных браузерах. Во-первых, установка
размера шрифта в процентах (вместо em) исключает проблему
в IE/Win с непропорциональным ростом или уменьшением
размера шрифта, если он будет установлен в em для
других элементов. Во-вторых, некоторые версии Opera могут отображать
100% шрифт слишком мелко по сравнению с другими
браузерами. С другой стороны у Safari проблемы
с размером шрифта 101%. Сейчас лучшее решение это использовать
значение 100.01% для этого свойства. [CSS:
Getting into good
habits]
1.6 Кодинг:
ОтладкаДобавляйте border чтобы
увидеть контейнеры. Используйте тестовые стили, такие
как границы или цвет фона при отладке документа. Хорошо работает
div {border:1px red
dashed;}, можно использовать
и * {border: 1px solid
#ff0000;}. Обратите внимание
на инструменты
которые могут помочь при отладке страницы. [Chric
Casciano] Использование границ для отдельных элементов может
помочь обнаружить их перекрытие, или лишние отступы которые
не всегда легко увидеть. [CSS Crib
Sheet] Code * {border:1px solid
#f00;}При отладке в первую
очередь проверяйте, все ли элементы закрыты.
Если после незначительных изменений в коде ваша прекрасная
разметка сломалась, причиной тому может быть незакрытый элемент. [10
CSS Tips]
2.1
Технические хитрости: Идентификаторы, Классы1 ID, много
классов. Идентификаторы, идентификаторы элементов должны
быть уникальны в пределах страницы, напротив множество
элементов могут использовать одно
и то же имя класса. Имена классов
и идентификаторов могут содержать символы A-Z, a-z, 0-9
и дефис (-), не могут начинаться с дефиса
или цифры (смотрите спецификацию CSS2) [Roger
Johansson] Имена элементов,
используемые в селекторах, чувствительны к
регистру. При использовании CSS с документом
XHTML, имена элементов в селекторах чувствительны к регистру,
чтобы избежать неприятностей я рекомендую использовать нижний
регистр для имен элементов в CSS селекторах. Имена классов
и идентификаторов чувствительны к регистру
и в HTML и в XHTML, поэтому
избегайте смешивания регистров в селекторах. [Roger
Johansson] Классы
и идентификаторы должны быть правильными. Имена
классов и идентификаторов должны начинаться
с буквы, идентификаторы должны быть уникальными, их
имена должны отражать
функциональность элемента, а не его оформление. [CSS Best
Practices] Можно использовать
несколько классов для одного элемента. Это позволяет
написать несколько правил, определяющих различные свойства,
и применять их по необходимости. [Roger
Johansson]
2.2
Технические хитрости: Используйте все возможности
селекторовRoger Johansson опубликовал чрезвычайно
полезную серию статей о селекторах в CSS
2.1, некоторые полезные моменты перечислены
ниже. Селекторы дочерних
элементов. Селектор дочернего элемента указывает
на элемент, который является непосредственным потомком другого
элемента, данный селектор состоит из двух или более селекторов
элементов разделенных знаком «>»,
родительский элемент располагается слева от этого знака.
Следующее правило действительно для всех элементов
strong являющихся
непосредственными потомками
div. [Roger
Johansson] Code div > strong
{color:#f00;}Селекторы соседних
элементов. Селектор соседних элементов состоит
из двух простых селекторов и символа
«+» между ними. Данный селектор указывает
на элемент, следующий за первым. Элементы должны
имеет один и тот же родительский элемент
и первый элемент должен располагаться непосредственно перед
вторым. [Roger
Johansson]
Селекторы
атрибутов. Эти селекторы можно использовать для
сопоставления правил к элементам на основании наличия
или значения атрибутов. Есть четыре способа использования селекторов
атрибутов.
[att]
Элементы
для которых установлен атрибут att, независимо от значения
этого
атрибута. [att=val]
Элементы
значение атрибута att которых в точности равно
val. [att~=val]
Элементы
атрибут att которых содержит список значений разделенных пробелами,
одно из которых равно val. В этом случае val не может содержать
пробелов. [att|=val]
Если
значением атрибута att элемента является список разделенных дефисом
слов, начинающийся со слова "val". Сопоставление всегда
начинается с начала значения атрибута. В первую
очередь это необходимо для сопоставления отдельным участкам кода языка
(например, атрибут
langв HTML или
xml:lang
в XHTML), как описано
в стандарте
RFC1766.
Следующее правило применяется
ко всем элементам p для которых определен атрибут
title: Селектор сопоставляющий правило всем
элементам div
которые имеют атрибут
class
со значением
error: Code div[class=error]
{color:#f00;}Можно использовать и множественные
селекторы атрибутов, это дает возможность отбора элементов
по нескольким атрибутам. Ниже представлен пример правила
применяемого к элементам blockquote которые имеют атрибут
класс в точности равный "quote"
и атрибут
cite (независимо
от значения этого атрибута): Code blockquote[class=quote][cite]
{color:#f00;}Используйте селекторы
потомков. Селекторы потомков помогут избежать
использования множества классов в разметке. [Roger
Johansson]
2.3
Технические хитрости: Оформление ссылокБудьте осторожны
со стилями для ссылок. Обратите внимание
на то, что классический якорь
(<a
name="anchor">) реагирует
на псевдо классы
:hover
и :active.
Чтобы исключить это, используйте в качестве якоря
идентификаторы элементов, или немного более заумный
синтаксис
:link:hover,
:link:active.
[Dave
Shea] Указывайте отношение
документов для ссылок. Атрибут
rel предназначен
для указания отношения текущей страницы к документу указанному
в атрибуте
href. Code a[rel~="nofollow"]::after
{
content: "\2620";
color: #933;
font-size:
x-small;
}
a[rel~="tag"]::after {
content:
url(http://www.technorati.com/favicon.ico);
}Здесь мы используем селектор
атрибутов для списка значений разделенных пробелами. Ссылки, для
которых установлен
nofollow будут
обозначены темно красным черепом, а те для которых
установлен tag
будут обозначены иконкой Technocrati. [Handy
CSS] Внешние ссылки можно
отметить автоматически. Многие использует нестандартное
значение
rel="external",
чтобы выделить ссылки на внешние сайты, добавлять его
к каждой ссылке трудоемкая и необязательная работа.
Следующее правило добавляет стрелку после каждой ссылки ведущей
на внешний сайт. [Handy
CSS] Code a[href^="http://"]:not([href*="smashingmagazine.com"])::after
{content:
"\2197";
}Code a:focus { outline: none; }
2.4 Технические
хитрости: CSS-техникиИспользуйте идентификатор для
тега body. Во многих случаях использование
идентификатора для тега
body позволяет
управлять оформлением элементов в зависимости
от того, на какой странице находится пользователь.
К тому же это дает возможность изменять оформление
документа не меняя файл стилей и страницу. [Ryan
Parr, Переключатель
стилей,Адаптивная
разметка] С помощью CSS можно
создавать колонки одинаковой высоты. Техника
создания колонок одинаковой высоты без использования фоновых
изображений. Создание
колонок одинаковой высоты с помощью фоновых
изображений. Вертикальное
выравнивание с помощью CSS. Представьте, что
у вас есть элемент меню высотой 2em, вы можете легко
отцентрировать текст по вертикали, задав
line-height: 2em.
[Evolt.org] Используйте
псевдо элементы и классы. Псевдо
классы и псевдо элементы можно использовать для
форматирования элементов не представленных в иерархии
документа, например, нет таких элементов как первая строка параграфа
или первая буква строки. Можно использовать псевдо классы
:first-child,
:hover,
:active,
:focus,
:first-line,
:first-letter,
:before,
:after
и другие. Использование
изображения для тега <hr> может
быть хорошим дополнением к странице. [CSS:
Best Practices] Можете
использовать один и тот же (X)HTML код для навигации
на всех страницах. Многие сайты подсвечивают
в навигации текущее местонахождение пользователя,
но это может быть неудобно потому что необходимо менять HTML
код навигации на каждой странице. Можно ли этого
избежать? [Ten More
CSS Tricks you may not know] Code <ul>
<li><a
href="#"
class="home">Home</a></li>
<li><a
href="#" class="about">About
us</a></li>
<li><a
href="#" class="contact">Contact
us</a></li>
</ul> Добавьте идентификатор к тегу
body,
он должен отражать текущее место пользователя
и изменяться когда он переходит на другую
страницу. Code #home .home, #about .about, #contact
.contact {
commands for highlighted navigation go
here
} Используйте
margin: 0 auto; для горизонтального
центрирования разметки. Чтобы отцентрировать элемент
по горизонтали нужно задать его ширину
и горизонтальные поля. [Roger
Johansson] Code <div
id="wrap">
<!-- Your layout goes here
-->
</div> Code #wrap {
width:760px; /*
Change this to the width of your layout */
margin:0 auto;}
Добавить CSS стили можно
и к RSS. Можно сделать намного больше
используя XSL, но и CSS сделает RSS более
привлекательными. [Pete
Freitag] Скрыть CSS
от старых браузеров. Чтобы скрыть CSS файл
от старых браузеров используйте директиву
@import. [Roger
Johansson] Всегда устанавливайте margin
и padding для блочных элементов. [10
CSS Tips] Устанавливайте
width или margin и padding.
Я использую следующее правило, если устанавливаю для элемента
width,
то не устанавливаю для него
margin
и padding и наоборот. Если
не следовать этому правилу, можно получить множество проблем,
особенно когда ширина задана в процентах. Поэтому
я сначала устанавливаю ширину контейнеров, а потом
поля и отступы для дочерних элементов. [Jonathan
Snook] Исключите
одновременное применение padding/borders и width
к элементам. IE5 неверно использует модель
представления документа в виде блоков, это может привести
к тому, что страница превратиться в мешанину. Один
из способов исправить эту проблему применять padding
к родительскому элементу, а width
к дочернему. [CSS Crib
Sheet] Предоставляйте стили
для печати. Добавить файл, содержащий стили для печати
можно точно таким же способом, как и обычный файл
CSS: Code <link
rel="stylesheet"type="text/css" href="print.css" media="print">
Code <style type="text/css"
media="print">@import
url(print.css);</style>
2.5
Технические хитрости: Исправляем баги IE Поддержка полупрозрачных PNG
в IE. Теоретически изображения
в формате PNG поддерживают
различные уровни прозрачности, но отсутствие
их поддержки в Internet Explorer
6, не позволяет широко использовать это
их достоинство. [CSS
Tips, Outer-Court.com] Code #regular_logo
{
background:url('test.png');
width:150px; height:55px;
}
/* \ */
* html
#regular_logo
{
background:none;
float:left;
width:150px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='test.png',
sizingMethod='scale');
}
/*
*/ Code #container
{
min-width:
600px;
max-width:
1200px;
width:expression(document.body.clientWidth <
600? "600px" :
document.body.clientWidth > 1200?
"1200px" : "auto");
}
В IE можно использовать
условные комментарии. Самый безопасный способ задать
специальные стили для IE/Win это использоватьусловные комментарии.
Использование условных комментариев вместо хаков сводит вероятность
проблем в будущем к минимуму. Так их можно
использовать чтобы подключить файл стилей, содержащий исправления для
IE/Win [Roger
Johansson] Code <!--[if
IE]>
<link rel="stylesheet" type="text/css"
href="ie.css" />
<![endif]-->
Кодинг: Поиск
вдохновенияЭкспериментируйте с CSS.
Экспериментируйте с фоновыми изображениями, цветами,
наследованием, выравниванием и селекторами. Play with
positive and negative margins. [Chric
Casciano] Учитесь у других.
Исследуйте хорошие сайты, HTML код любого сайта легко доступен,
смотрите какие методы используют другие разработчики
и перенимайте те которые могут быть полезны
и вам. [20
pro tips]
Источники
и полезные ресурсы
| 