Писать стили без стиля можно если проект маленький. Или дизайн простой. Или если вы работаете надо проектом один и намерены забыть о проекте, как только он будет сдан в экспуатацию. Или если вас не интересует результат. :) Но если проект большой и будет жить долго и так же долго будет поддерживаться, то нужен порядок и чем он будет жёстче, тем проще и дешевле будет идти поддержка. Единый и однозначный стиль кодирования нужен и при написании проекта «с нуля» и при необходимости вставки пары строк в файл другого проекта. Нужен для того, чтобы не задумываться, куда и как писать.
Ниже приводится используемый мой стиль написания CSS. Он включает в себя как определённую последовательность свойств и их значений в одном опредении, так и определённый порядок описания блоков в файле.
(TODO: описать где-то принцип разбиения на блоки, префиксы блоков, #js, -js, -nojs)
Выделяются 7 блоков свойств (шрифт, позиционирование, отображение, размеры, таблицы/списки, текст, цвета), каждый блок отделяется пустой строкой. Всегда используется такая последовательность свойств и их значений.
{
font: 1em sans-serif;
font-family: Arial, sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-variant: normal;
position: static;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
visibility: hidden;
float: none;
clear: none;
overflow: hidden;
clip: rect(0 0 0 0);
box-sizing: content-box;
-moz-box-sizing: border-box;
width: auto;
min-width: 0;
max-width: 0;
height: auto;
min-height: 0;
max-height: 0;
margin: 0;
padding: 0;
table-layout: fixed;
empty-cells: show;
border-spacing: 0;
border-collapse: collapse;
list-style: none;
content: "";
cursor: default;
text-align: left;
vertical-align: top;
line-height: 1;
white-space: normal;
text-decoration: none;
text-indent: 1;
text-transform: uppercase;
letter-spacing: 1;
word-spacing: normal;
opacity: 1;
color: red;
border: 1px solid red;
background: #fff url(../i/bg.png) no-repeat 0 0;
}
Стороны записываются как принято в CSS: top, right, bottom, left. Это касается как указания позиции, так и margin-top, padding-top, etc.
Каждый блок окружается комментриями вида /* Краткое описание блока (begin) */, /* Краткое описание блока (end) */. Если блок содержит в себе другие независимые блоки, которые больше нигде не встречаются, то они пишутся внутри этого родительского блока с отбивкой в одну табуляцию. Так же окружается такими комментриями набор определений не являющихся независимым блоком, но описывающих один элемент (см. пример).
Пример:
/* Header (begin) */
.b-head
{
width: 100%;
...
}
...
/* Service (begin) */
.b-head .service
{
width: 80%;
...
}
...
/* Service (end) */
...
/* Header (end) */
Самое сложное это поддерживать одинаковую последовательность в основном файле и в файле -ie (TODO: описать разбиение на файлы, описать файл -ie).
/* Common definitions (begin) */
(TODO: описать отдельно общие для разных проектов глобальные опеределения)
/* Common definitions (end) */
/* Вспомогательные глобальные определения (begin) */
Блоки с префиксом g-
/* Вспомогательные глобальные определения (end) */
/* Header (begin) */
Шапка страницы (блок b-head).
/* Header (end) */
/* Footer (begin) */
Подвал страницы (блок b-foot).
/* Footer (end) */
/* Common blocks (begin) */
Блоки общие для нескольких страниц. Располагаются в порядке следования на странице.
/* Common blocks (end) */
/* Pages (begin) */
Специфичные для отдельных страниц стили.
/* Pages (end) */