Введение

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

Ниже приводится используемый мой стиль написания 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) */
    

Структура типичного CSS файла

Самое сложное это поддерживать одинаковую последовательность в основном файле и в файле -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) */