70 идей экспертов для улучшения CSS кода

Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки. Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны.

Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи.

• Мы собираемся опубликовать pdf-версию этой статьи, так что подпишитесь на наш RSS канал (Smash Magazine RSS)¹, чтобы следить за обновлениями.
• Возможно, вам будет интересно прочесть нашу статью 53 CSS-Techniques You Couldn’t Live Without², которая даст вам базовый набор техник CSS кодинга.

Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями.

1.1 Кодинг: Начинаем

• Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS. [CSSing³]
• Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset⁴, обнуляя отступы и поля всех элементов в самом начале файла стилей. Eric Meyer’s Global Reset⁵, Christian Montoya's initial CSS file⁶, Mike Rundle's initial CSS file⁷, Ping Mag's initial CSS file⁸. [Roger Johansson⁹]
• Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию. [Master Stylesheet:¹⁰ The Most Useful CSS Technique], [Ryan Parr¹¹]

master.css

@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");/**/ 
</style>

• Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>) [Richard K. Miller¹²]

.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 и возможно файл настроек типографики.

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¹³]

/* -----------------------------------*/ 
/* ---------->>> GLOBAL <<<-----------*/ 
/* -----------------------------------*/

• Создавайте таблицу содержимого. В начале файла CSS, создайте таблицу содержимого. Стоит выделить различные разделы (header, main, footer etc), разделитель разделов должен быть хорошо заметным. [5 Steps to CSS Heaven⁸]
• Упорядочивайте свойства в алфавитном порядке. Не знаю, кто подал мне эту идею, но я упорядочиваю свойства в алфавитном порядке, это упрощает их поиск. [Christian Montoya⁶]

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¹⁷]

# /* 
# 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²³]

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 и другие.

margin: top right bottom left; 
margin:1em 0 2em 0.5em;
(margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0.5em;)

border:width style color; 
border:1px solid #000;

background: color image repeat attachment position; 
background:#f00 url(background.gif) no-repeat fixed 0 0;

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²⁵]

<meta http-equiv="content-type"
    content="text/html;charset=utf-8" />

• Управляйте регистром с помощью CSS. Если нужно чтобы текст был написан заглавными буквами, вместо того чтобы переписывать его позвольте сделать эту работу CSS. Следующий код трансформирует все заголовки в верхний регистр. [20 pro tips²⁵]

h1 { text-transform: uppercase; } 

• Используйте малые прописные с помощью CSS. Свойство font-variant используется для вывода текста малыми прописными, это значит что все буквы в нижнем регистре будут преобразованы в заглавные, но с меньшим размером шрифта

h1 { font-variant: small-caps; } 

• Предусматривайте все возможности — указывайте тип шрифта. Когда указан конкретный шрифт, который должен использоваться в дизайне, это делается в надежде на то, что этот шрифт установлен у пользователя, но нужно предусмотреть и случай когда необходимого шрифта нет, для этого можно определить альтернативные шрифты, как показано ниже, очень важно закончить список типом необходимого шрифта. [Getting into good coding habits²⁶]

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²⁸]

* { 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⁹]

div > strong { color:#f00; }

• Селекторы соседних элементов. Селектор соседних элементов состоит из двух простых селекторов и символа «+» между ними. Данный селектор указывает на элемент, следующий за первым. Элементы должны имеет один и тот же родительский элемент и первый элемент должен располагаться непосредственно перед вторым. [Roger Johansson³³]

p + p { color:#f00; }

• Селекторы атрибутов. Эти селекторы можно использовать для сопоставления правил к элементам на основании наличия или значения атрибутов. Есть четыре способа использования селекторов атрибутов.
  
  [att]
  Элементы для которых установлен атрибут att, независимо от значения этого атрибута.
  
  [att=val]
  Элементы значение атрибута att которых в точности равно val.
  
  [att~=val]
  Элементы атрибут att которых содержит список значений разделенных пробелами, одно из которых равно val. В этом случае val не может содержать пробелов.
  
  [att|=val]
  Если значением атрибута att элемента является список разделенных дефисом слов, начинающийся со слова "val". Сопоставление всегда начинается с начала значения атрибута. В первую очередь это необходимо для сопоставления отдельным участкам кода языка (например, атрибут lang в HTML или xml:lang в XHTML), как описано в стандарте RFC1766.
• Следующее правило применяется ко всем элементам p для которых определен атрибут title:

p[title] { color:#f00; }

• Селектор сопоставляющий правило всем элементам div которые имеют атрибут class со значением error:

div[class=error] { color:#f00; } 

• Можно использовать и множественные селекторы атрибутов, это дает возможность отбора элементов по нескольким атрибутам. Ниже представлен пример правила применяемого к элементам blockquote которые имеют атрибут класс в точности равный “quote” и атрибут cite (независимо от значения этого атрибута):

blockquote[class=quote][cite] { color:#f00; }

• Используйте селекторы потомков. Селекторы потомков помогут избежать использования множества классов в разметке. [Roger Johansson⁹]

2.3 Технические хитрости: Оформление ссылок

• Будьте осторожны со стилями для ссылок. Обратите внимание на то, что классический якорь (<a name="anchor">) реагирует на псевдо классы :hover и :active. Чтобы исключить это, используйте в качестве якоря идентификаторы элементов, или немного более заумный синтаксис³⁴:link:hover, :link:active. [Dave Shea²⁸]
• Указывайте отношение документов для ссылок. Атрибут rel предназначен для указания отношения текущей страницы к документу указанному в атрибуте href.

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³⁵]

a[href^="http://"]:not([href*="smashingmagazine.com"])::after { 
    content: "2197"; 
}

• Убрать точки вокруг ссылок³⁶ можно с помощью outline:none;.

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⁴³]

<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, он должен отражать текущее место пользователя и изменяться когда он переходит на другую страницу.

#home .home, #about .about, #contact .contact {
    commands for highlighted navigation go here
}

• Используйте margin: 0 auto; для горизонтального центрирования разметки. Чтобы отцентрировать элемент по горизонтали нужно задать его ширину и горизонтальные поля. [Roger Johansson⁴⁴]

<div id="wrap">
    <!-- Your layout goes here -->
</div>

#wrap {
    width:760px; /* Change this to the width of your layout */
    margin:0 auto;
}

• Добавить CSS стили можно и к RSS. Можно сделать намного больше используя XSL, но и CSS сделает RSS более привлекательными. [Pete Freitag⁴⁵]

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>

• Скрыть CSS от старых браузеров. Чтобы скрыть CSS файл от старых браузеров используйте директиву @import. [Roger Johansson⁹]

@import "main.css";  

• Всегда устанавливайте margin и padding для блочных элементов. [10 CSS Tips¹⁸]
• Устанавливайте width или margin и padding. Я использую следующее правило, если устанавливаю для элемента width, то не устанавливаю для него margin и padding и наоборот. Если не следовать этому правилу, можно получить множество проблем, особенно когда ширина задана в процентах. Поэтому я сначала устанавливаю ширину контейнеров, а потом поля и отступы для дочерних элементов. [Jonathan Snook¹⁵]
• Исключите одновременное применение padding/borders и width к элементам. IE5 неверно использует модель представления документа в виде блоков, это может привести к тому, что страница превратиться в мешанину. Один из способов исправить эту проблему применять padding к родительскому элементу, а width к дочернему. [CSS Crib Sheet²⁸]
• Предоставляйте стили для печати. Добавить файл, содержащий стили для печати можно точно таким же способом, как и обычный файл CSS:

<link rel="stylesheet"
    type="text/css" href="print.css" media="print">

<style type="text/css" media="print">
    @import url(print.css);
</style>

• это гарантирует, что эти стили будут использоваться только для печати и не повлияют на внешний вид страницы на экране. В стилях для печати необходимо использовать черный текст на белом фоне и удалить все лишние элементы. 15 минут на подготовку к печати⁴⁶, More about CSS-based print-Layouts⁴⁷. [20 pro tips²⁵]

2.5 Технические хитрости: Исправляем баги IE

• Поддержка полупрозрачных PNG в IE. Теоретически изображения в формате PNG поддерживают различные уровни прозрачности, но отсутствие их поддержки в Internet Explorer 6, не позволяет широко использовать это их достоинство. [CSS Tips, Outer-Court.com⁴⁸]

#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');
} 
/* */

• Min-width и max-width в IE. Для этого можно использовать выражения. [Ten More CSS Trick you may not know⁴³]

#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⁴⁴]

<!--[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²⁵]

Источники и полезные ресурсы

• CSS Tips and Tricks⁹ by Roger Johansson
• (The Only) Ten Things To Know About CSS⁵¹ by John Manoogian
• CSS Crib Sheet⁵² by Dave Shea
• My Top Ten CSS Tricks [CSS Tutorials]⁴³ by Trenton Moss
• CSS Tips⁴⁸ by Philipp Lenssen
• Top CSS Tips⁵³ by Jonathan Snook
• Ten CSS tricks — corrected and improved⁵⁴ by Tantek ?elik
• Ten More CSS Trick you may now know⁵⁵ by Trenton Moss
• CSS techniques I use all the time⁶ by Christian Montoya
• CSS Tip Flags⁵⁶ by Douglas Bowman
• My 5 CSS Tips⁷ by Mike Rundle
• 5 Steps to CSS Heaven⁸ by Ping Mag
• Handy CSS³⁵ by Lachlan Hunt
• Erratic Wisdom: 5 Tips for Organizing Your CSS⁵⁷ by Thame Fadial
• 15 CSS Properties You Probably Never Use (but perhaps should)⁵⁸ by SeoMoz
• 10 CSS Tips You Might Not Have Known About¹⁸ by Christopher Scott
• A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards⁵⁹ by Ben Henick
• Tips for a better design review process⁶⁰ by D. Keith Robinson
• 20 pro tips - .net magazine²⁵ by Jason Arber
• CSS Best Practices¹² by Richard K Miller
• 10 Quick Tips for an Easier CSS Life¹⁶ by Paul Ob
• 10 CSS Tips from a Professional CSS Front-End Architect¹¹ by 72 DPI in the shade team blog
• Web Design References: Cascading Style Sheets⁶¹ by Laura Carlson
• Getting Into Good Coding Habits²⁶ by Adrian Senior

Источник: http://designformasters.info/