Задумывались ли вы когда-нибудь, как удобнее записывать код CSS в таблице стилей? В целом существует два подхода: однострочная и многострочная записи, и многострочная запись является общепринятым и наиболее часто используемым подходом:

#wrapper {
    width:800px;
    margin:0 auto;
}

#header {
    height:100px;
    position:relative;
}
#feature .post {
    width:490px;
    float:left;
}

Но в больших таблицах стилей с тысячами правил такая запись может стать неудобной, слишком объемной. И тогда может быть удобней использовать однострочную запись, в которой все селекторы и их атрибуты располагаются каждый на отдельной строке, и поэтому они хорошо видны, и это выглядит примерно следующим образом:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}

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

Примечание редакции:  Но не стоит забывать о дополнительных запросах HTTP при использовании нескольких файлов. А также о размере файла, который увеличивают пробелы и переводы строки. Как же быть в этой ситуации, есть ли способ, объединяющий плюсы и минимизирующий минусы этих подходов? Мы рекомендуем третий вариант: объединять свойства и их значения в группы по смыслу. Например, то, что касается положения: внешние и внутренние отступы, расположение, всплытие и т. п. записать на одну строку, а то, что касается шрифта: цвет, размер, подчеркивание и т. п., записать на другую строку и таким образом расположить все свойства. Такая запись может выглядеть, например, так:

#logo
  {
  position: absolute; display: block; margin-left: 15px; margin-top: 20px; padding-top: 30px;
  width: 163px; height: 15px;
  font-size: 8px; line-height: 10px; color: #000000; text-align: left; font-style: italic; font-weight: bold;
  background: url(images/lifestone.png) center no-repeat;
  }

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

Автор идеи урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Меню для всех страниц с возможностью подсветки текущего пункта
• Использование таблиц стилей браузеров и значения CSS3 по умолчанию
• Полностью адаптивные таблицы с использованием элементов определений терминов