Конвенция для форматирования CSS

Question

Некоторые разработчики особенно подробно описывают, как они форматируют свои коды по некоторым веским причинам. CSS является одним из элементов, форматирование которых на самом деле не имеет строгого соглашения (скорее всего, из-за его декларативного характера).

Наша группа обычно придерживается этого «соглашения». Более длинный и более подробный документ можно найти here.

/* Separate each selector to its own line. */ 
selector-1, 
selector-2<1-space>{ 
    <indent>property:<1-space>value; 
} 

selector { 
    /* Float. */ 
    /* Positioning related declarations. */ 
    /* Visibility. */ 
    /* Box related declarations. */ 
    /* Font related declarations. */ 
} 

Есть ли инструмент, который я могу легко настроить, чтобы произвести это форматирование?

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

Примечание: Это, вероятно, не подходит для того, чтобы быть ВОПРОСОМ. Тем не менее, я вполне уверен, что опыт, накопленный некоторыми SO-ers во время написания их права владения и поддержки CSS-кодов, безусловно, даст понимание этой проблемы.

Некоторые инструменты для автоматического форматирования CSS exist, но нет достаточно расширяемого.

Answer 1

Обычно я следую этому соглашению. Также используется только один отступ. Это обеспечивает максимальную читаемость в нашей команде.

.selector { 
    Style Defs: 
     * dimensions (width, height) styles 
     * positioning (with coordinates) styles 
     * float/clearstyles 
     * spacing (margin, padding, border) styles 
     * display/visibility styles 
     * typography-related (line-height, color, etc.) styles 
     * miscellaneous (list-style, cursors, etc.) styles 
} 

Answer 2

I, как правило, сплит определение стиля расположения, цвет/изображений определение стиля и @media печать в три совершенно разные стилей, которые затем объединяются, уменьшенные и кэшированными во время просмотра с помощью заказного обработчика.