alexilin

Табуляция

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

1
2
3
4
5
6
7
8
9
10
11

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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 легким для понимания и редактирования.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#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-х строчек кода:

1
2
3
4
5
6

#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;
}

Разделяйте таблицу стилей на характерные области

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

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

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

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

1
2
3

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

Основные стили в начале

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

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