1) Используйте CSS-Reset.

CSS-reset — это некий фрагмент кода, который пишется вначале нашего файла стилей, в котором обнуляются все значения, и задаются все основные параметры для всех стилей , которые нам, скорее всего пришлось бы прописывать для каждого конкретного id/class. Это позволяет укоротить код впоследствии, а также избежать различий в отображении браузерами.

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

2) Используйте сокращения

К примеру, чтобы писать длинное

border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;

мы можем записать коротко:

border: 5px 10px 15px 20px;

то есть по часовой стрелке начиная сверху.

В основном сокращают border, margin, padding, font и background.

подробней об этом вы можете посмотреть тут

А вот цвета можно сокращать так:

Если кода цвета состоит из 3х повторяющихся цифр, то можно записать просто три этих цифры.
На примере: #FFFFFF можно записать как #FFF, или #990055 можно записать #905, а #F091A4 сократить нельзя.

3) Используйте комментарии

Используйте комментарии везде, где следует — они очень помогают упорядочить код, делая его более понятным для себя и для того, кто будет с ним работать

Выглядит это примерно так:

/* Ваш комментарий здесь */

Комментируйте :

а) Заголовок страницы стилей — пишите кто автор кода и когда он был написан

б) Отмечайте разделы стилей — это упорядочит весь код по разделам.
Например:

/****************************************/

/*             Sidebar                  */
/****************************************/

в) Комментируйте проблемные места. Например те, где страница может иметь отличия в разных бразуерах.например:

input[type=textbox] /* IE6 Problem */

г) Пишите маленькие комментарии тем, с кем работаете — например, когда нужно что-то доработать.

4) Добавляйте Легенду Цветов

На маленьких css-файлах не сложно отслеживать все цвета сайта.
А что делать, если у нас код на 5000 строк? — ведь нельзя допускать использования не тех цветов.
Для этого существует легенда цветов — то есть список тех цветов, которые мы используем в нашем файле.Например:

/*
/* светлый синий: #4595be
/* тёмный синий: #367595
/* красный для ссылок: #9F1212
********************************/

5) Помним, что такое Position:realtive и Position:absolute

В этих понятиях путается большинство начинающих верстальщиков, но есть правило, которое позволяет избежать путаницы.

Position:absolute позиционирует объект относительно страницы — и неважно, где он расположен в HTML-потоке. По умолчанию это значение 0 слева и 0 сверху.

Обычно этот вариант не используется — ибо неудобен и ограничен в опциях. А вот что вам пригодиться — если задать родителю («обёртке») нашего элемента Position:realtive , то Position:absolute будет выравниваться уже относительно верхнего левого угла родителя. Так что можете проставлять это свойство по-необходимости. Наглядно на картинке:

6) Избегайте использование хаков

Порой такие браузеры , как IE6 и IE7 просто вынуждают нас использовать хаки. Хаки — сразу ошибка для валидатора. Так что выносите из в специальные css-файлы для каждого браузера.
Специальные записи для хаков каждому браузеру и как их выносить в отдельные файлы можно посмотреть тут

7) Используйте Margin’ы в описании расположения

На это не так часто обращают внимание, но это помогает избежать проблем в различных браузерах.

Идея следующая: вместо использования padding’а у родителя, мы используем margin для дочерних-элементов. Так, вместо

#main-content { padding-left: 10px }

пишем

#main-content { }
#main-content #left-column { margin-left: 10px }

Ничего неправильно в использовании padding’а, но опыт показывает, что лучше всё же margin

8) Используйте float’ы

Если вы ходите приписать элементу float, то его родителю пишите overflow:hidden

Пример:

ul {
overflow: hidden;
}

ul li {
float: left;
}

Без этого свойства элемент может обтекаться некрасиво — также проблемы могут возникнуть при задании margin’ов или border’ов.

Если вы хотите, чтобы элемент не обтекался — указываем clear:both ниже обтекаемого элемента. Часто это используют вместо overflow: hidden;

9) Добавляем display:inline для float-элементов

Довольно известная проблема в IE6 с удваиванием margin’ов у float-элементов.То есть если нам нужно 20px, то приходится писать 10px, ибо этот отступ удваивается.Хотя IE6 уже приказывает долго жить, и многие дизайнеры не тратят время на то, чтобы оптимизировать сайт под него, всё же небольшой кусочек кода сделает отображение в нём приятней. Итак, ставим

display: inline /* IE6 Problem */

для элемента, к которому применён float

10)Делаем спрайтами жизнь комфортнее.

Картинки-спрайты — очень удобная вещь. Они дают представление обо всей графике страницы, и снижают время загрузки.

Если знаете английский, то вот статья о них

11) Структура файлов сайта должна быть понятной

Потратьте время на то, чтобы сделать структуру сайта понятной. Раскидайте всё по полочкам.
Например:

Здесь «Website Name» — имя сайта, с которым мы работаем. Эта папка содержит HTML-файлы для сайта, плюс папки assets и styles.
В папке assets содержаться файлы, которые можно скачать с сайта, например, архивы или PDF-файлы. В папке styles содержаться, в свою очередь, папки css, images, javascript.

  • css — содержит все файлы css, например, reset.css, layout.css и main.css
  • images — все картинки сайта. Эту папку тоже можно разбить по разделам.
  • javascript — все javascript-файлы.

Эта схема приблизительна, и можно её отображать по-разному. Мысль в том, что она помогает вам рабоать быстрее и делает сайт понятнее и аккуратнее.

12) Разверните стили

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

13) Используйте пиксели а не относительные величины

Всё довольно просто — пиксели меньше нагружают код, так как документу не придётся высчитывать проценты относительных величин.

Проблема относительных величин — в передаче этой относительности.
Чтобы было понятно, разъясню на примере:

body { font-size: 62.5% } значит font-size: 1em , то есть 10px.

Если #blog-content нужен 14px, прописываем:

#blog-content { font-size: 1.4em; }

Теперь если H3 тег внутри #blog-content нужен нам 20px, то его можно было бы задать так:

#blog-content { font-size: 1.4em; }
#blog-content h3 { font-size: 2.0em }

Всё бы хорошо, но у нас действует относительность. И эти 2.0em применяются к 1.4em
#blog-content’a, и в итоге, размер мы получим 28px.

Так что используйте фиксированные величины.

14) Ограничивайте псевдо-классы якорными тегами

Новые браузеры не имеют данной проблемы, всё упирается в ряд старых браузеров во главе с IE6.
Проблема заключается в том, что в старых браузерах псевдо-классы (такие как :hover) работают только применительно к тегу a , тоесть

#header ul li:hover { background-color: #900 }

не работает в IE6

Эта проблема устраняеться с jQuery

15) Избегайте проблем с селекторами

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

Например, используйте вместо

#main-content .main-header

это:

#main-content h1

Будьте осторожны с группировкой селекторов

Ведь тут могут неправильно сыграть относительные величины, если вы их используете

Если на это примере всё в порядке,

.main-content div, .main-content p {
color: #000;
}

То на этом — будьте внимательны с относительными величинами.

.main-content div, .main-content p {
line-height: 1.3em;
}

И напоследок

Чтобы написать успешный код, избегайте постоянного оборачивания одного в другое и тд.
Учите теги h1, ul и p.