Мёртвый блог живого человека

SEO-оптимизация, манимейкинг, веб-разработка

Правила хорошего CSS

Расскажу о своих правилах, которые я использую в любом файле CSS.

Зачем это нужно ? Во первых, ваш CSS-файл будет легче читаться и восприниматься. Во вторых, хороший стиль написания это всегда плюс. Ну и в третьих, это намного упрощает жизнь.



1. Всё должно быть абсолютно валидным. Я стараюсь избежать даже warning’ов.

2. Старайтесь комментировать как можно больше.
Даже очевидным вещам не помешают комментарии. Например перед блоком header я пишу /* Шапка */, перед footer /* Подвал */. Вроде очевидно, но мельком просматривая код, зацепиться глазом намного легче, особенно если файл стилей разбит на логические блоки.

3. Разбивайте файл на логические блоки.
Каждый логический блок от другого отделяется пустой строкой. Блоки идут в логическом порядке, сначала подготовки(CSS reset и другие мелочи), затем блок body, после него идут блоки настроек основных компонентов(ссылок, параграфов, заголовков и т.д.).
С помощью блоков и комментариев просматривать и находить что-то в файле стилей становится безумно удобно и просто.

4. Сортируйте свойства CSS по алфавиту.
По началу немножко трудно, особенно для тех, кто не шибко знаком с английским алфавитом. Но в дальнейшем привыкаешь и уже автоматом пишешь свойства по алфавиту. Безумно упрощает редактирование.

5. Используйте иерархию.
Иерархия довольно удобная вещь. Например, имеет заголовок(<header>), в который вложено 2 блока(<div id=”h_left”> и <div id=”h_right”>), очень приятно для глаза будет описать эти блоки в иерархическом порядке:

header { … }<br />
  header h_left { … }<br />
   header h_left p { … }<br />
   header h_left a { … }<br />
  header h_right { … }<br />
    header h_right p { …  }<br />
    header h_right a { … }

6. Используйте 2 стиля написания, короткий и длинный:

body { … короткий … }
body {<br />
…<br />
длинный<br />
…<br />
}

Если свойств очень мало, то зачем писать длинный блок? Упростим как чтение, так и размер файла стилей.

7. Определитесь со стилем написания.
Например, я использую для отступа табуляцию, для построения иерархии 2 пробела. Каждому свойству я задаю значение после пробела( text-align: center; )

8. Обязательно используйте CSS Reset.
Ставить заплатки(костыли) под разные браузеры уже не модно. IE6 официально умер. Большую часть всего можно верстать валидно используя CSS Reset. О CSS Reset я более подробно остановлюсь в одном из следующих моих постов.

Надеюсь, мои советы вам помогут. Пользуетесь ли вы какими-то правилами? У вас есть замечания или дополнения? Пишите в комментариях, буду рад услышать ваше мнение :)



Спонсор: Делаете ремонт? Обязательно сделайте остекление REHAU!

Оставить комментарий

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Комментарии

  1. Илья Житенёв

    Март 8, 2010 в 22:13

    Я пользуюсь разбивкой блогов по логическому типу и короткими блоками.

    В следующий раз попробую использова иерархию и сортировать стили по алфавиту.

    Спасибо за советы. Нашёл для себя несколько новых и полезных.

    VA:F [1.9.22_1171]
    0
  2. Пожалуйста Илья :)

    Ещё скоро появится другая версия статьи, более полная.

    VN:F [1.9.22_1171]
    -2
  3. Спасибо автору. Я вот не придавал никогда особого значения иерархии, в плане расположения и вспомогательных надписей. Только что (для интереса) стал рабоать по советам автора на одном из своих проетов. Думаю — будет по крайней мере удобнее! ))

    VA:F [1.9.22_1171]
    0
  4. По 2му не стоит увлекаться — блоки для того и называют header, footer чтобы сразу было понятно к чему они =)

    VA:F [1.9.22_1171]
    0
  5. Александр Пофигеевич

    Март 19, 2010 в 00:34

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

    VA:F [1.9.22_1171]
    0
  6. Александр Пофигеевич, для каждой строчки это уже черезчур (: Комментирование должно быть к месту...

    VN:F [1.9.22_1171]
    0


Подпишись и будь вкурсе всех новых тем на блоге — узнаешь много нового!