alexilin

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

#main_side {
    width: 392px;
    padding: 0;
    float: right; }
 
    #main_side #featured_articles {
        background: #fff; }
 
    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

Такая структура позволяет легче ориентироватся в разметке и видеть как относятся друг к другу блоки на странице.

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

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}

2) Используйте сокращенную запись свойств чтобы сэкономить место. Например:

margin:5px 0 4px 10px

более рационально, чем:

margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px

Объединение свойств на одной линии используя сокращенную запись делает ваш CSS легким для понимания и редактирования.

#test {
      margin-top: 2px;
      margin-right: 3px;
      margin-bottom: 5px;
      margin-left: 9px;
      font-weight:bold;
      font-size:12px;
      line-height:14px;
      font-family:Arial, Verdana, sans-serif;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      background-color:#fff;
      background-image:url(bg.gif);
      background-repeat:no-repeat;
      background-position:0 15px
}

Согласитесь что это не очень удобно редактировать. Но используя несколько сокращенных записей вся эту куча правил может быть уменьшена до 4-х строчек кода:

#test {
      margin: 2px 3px 5px 9px;
      font: bold 12px/14px Arial, Verdana, sans-serif;
      border: 1px solid #000;
      background: #fff url(bg.gif) 0 15px no-repeat;
}

3) Разделите вашу таблицу стилей на характерные области. Кстати с помощью метода специальной метки вы сможете быстрее попасть в нужную вам область. Прежде чем вы разделите свои стили, определите названия областей и вид разделителя, который вам будет проще заметить.

Например такие:

• Общие стили – (body, paragraphs, lists, и т.д.)
• Шапка сайта
• Структура страницы
• Загаловки
• Стили текста
• Навигация
• Формы
• Комментарии
• Дополнительно

И вид разделителя:

/* -----------------------------------*/
/* ---------->>> Общие стили <<<-----------*/
/* -----------------------------------*/

4) Четвертый совет не всегда возможно использовать, но при реализации он приносит неоценимую пользу. Для этого необходимо чтобы основные правила были определены только один раз, и в дальнейшем в таблице не переопределялись. Например если вы знаете что все элементы не должны иметь отступов, определите эти правила в начале. Это позволяет получить быстрый доступ к редактированию элементов, если дизайн ресурса предполагает частые косметические изменения.

5) Пятый совет это своего рода сравнение двух вариантов организации CSS, их плюсов и минусов.

С одной стороны вы можете использовать CSS компрессор и получить удобную таблицу стилей — каждое правило на отдельной линии. Преимущество данного метода в том что вы имеете легкую для восприятия структуру CSS. Недостаток — тяжело редактировать, т.к. появляется горизонтальная прокрутка.

Если использованть распространенный метод табуляции, то это просто поменяет преимущества и недостатки местами.

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

А какие методы используете вы?

Источник: «5 Tips for Organizing Your CSS»