5 способов улучшить ваш CSS

Далее представлены пять советов по совершенствованию вашего CSS

1. Reset

Обязательно используйте сброс настроек в том или ином виде. Вы можете использовать уже готовые решения ( Eric Meyer, YUI), или придумать свои, выбирайте что больше нравится.

Это может быть обычное удаление полей и отступов, у всех элементов:

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
    margin: 0; padding: 0;
}

Указанные выше готовые решения, конечно весьма впечатляют, но мне кажется что они немного чрезмерны. Я так и представляю себе, как вы сбрасываете все настройки у всех элементов, а затем заново их устанавливаете. Поэтому если вы решили использовать один из предложенных вариантов, не стоит полностью копировать весь CSS-файл, лучше измените его так, чтобы он максимально отвечал требованиям вашего проекта.

И пожалуйста не делайте следующее:

* {
    margin: 0;
    padding: 0;
}

Этот прием увеличивает время обработки, и при удалении паддинга, некоторые элементы будут отображаться некорректно (например radio button). Элементы форм, при удалении всех настроек, могут вести себя непредсказуемо, поэтому сброс к ним лучше не применять.

2. Алфавитный порядок

В каком из примеров по вашему мнению быстрее можно найти свойство margin-right?

Пример 1

div#header h1 {
    z-index: 101;
    color: #000;
    position: relative;
    line-height: 24px;
    margin-right: 48px;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
}

Пример 2

div#header h1 {
    border-bottom: 1px solid #dedede;
    color: #000;
    font-size: 18px;
    line-height: 24px;
    margin-right: 48px;
    position: relative;
    z-index: 101;
}

Согласитесь, что во втором примере свойство находится быстрее. Расположив свойства в алфавитном порядке, вы создадите эту последовательность, которая поможет вам сократить время, затрачиваемое на поиск специализированного свойства.

Я знаю множество людей, располагающих CSS-свойства разными способами, но в нашей компании мы пришли к соглашению, располагать все свойства в алфавитном порядке. Это помогает, когда приходится работать с кодом, написанным другими людьми. Мне досадно каждый раз, когда приходится работать с css-файлом, в котором свойства не расположены по алфавиту.

3. Группировка

Вы должны организовать ваш CSS-файл так, чтобы искомые объекты и связанные с ними свойства располагались рядом, также эффективно использование комментариев. Вот например мой способ группировки:

/*****Reset*****/
Удаляем margin и padding для элементов

/*****Basic Elements*****/
Определяем стили для основных элементов: body, h1-h6, ul, ol, a, p, и т.д.

/*****Generic Classes*****/
Определяем стили для простых вещей, например, плавающие блоки, удаление нижних отступов элементов, и т.д.

/*****Basic Layout*****/
Определяем стили для шаблона: header, footer, и т.д. Элементы которые помогают определить структуру страницы сайта

/*****Header*****/
Определяем стили для всех элементов в шапке

/*****Content*****/
Определяем стили для основного контента

/*****Footer*****/
Определяем стили для футера (нижней части сайта)

/*****Etc*****/
Определяем стили для остальных элементов

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

4. Последовательность

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

Лично я использую комбинацию обоих способов. Если селектор содержит больше трех свойств, я разбиваю его на несколько строк.

div#header { float: left; width: 100%; }

div#header div.column {
    border-right: 1px solid #ccc;
    float: right;
    margin-right: 50px;
    padding: 10px;
    width: 300px;
}

div#header h1 { float: left; position: relative; width: 250px; }

5. Начните правильно

Не начинайте писать css-стиль, пока не закончена разметка страницы.

Прежде чем создавать CSS-файл, я пишу всю разметку страницы начиная от открывающего тега body, до закрывающего. Я не добавляю лишних div-ов, id и классов, только некоторые характерные блоки, типа header, content, и footer.

Используйте наследование CSS-селекторов, для расположения дочерних элементов, не добавляйте автоматически классы и id к элементам. Помните главное: CSS ничего не стоит без хорошо отформатированного документа.

Это далеко не полный список некоторых советов, которые помогают мне писать лучший код. А какие советы используете вы?