Организация CSS

[Great Rash]

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

Оговорюсь, что проекты у меня довольно специфичные. Т.е., например, наличие 10 разных размеров шрифтов или, скажем, 10 - 15 цветов для текста и сылок - это совершенно нормально. Так же абсолютно нормальная практика - рисование новых макетов параллельно с версткой, т.е. различные блоки, элементы, кнопки и т.п. появляются и исчезают постоянно. Например сейчас у меня main.css состоит из ~1800 строк и это не предел. Как организовывать код в такой ситуации совершенно не представляю.

[rash]

Организация напрашивается сама собой: каждый блок (если его можно выделить в самостоятельную сущность) описывать отдельным файлом, в корневом файле подключать все с помощью импортов. Ну и для продакшена собирать все в один файл без импортов. Также это придется делать для тестирования в IE. Готовых общедоступных инструментов для этого не знаю, но это с некоторыми оговорками и разумными ограничениями можно сделать и самостоятельно, или попросить программиста

Тогда при удалении блока — удаляем импорт, и все чисто. Внести исправления тоже всегда можно в одном месте, не рыская по файлу (или в нескольких, если будут фиксы для IE), однако всегда будет известно, где в первую очередь искать стили для того или иного элемента.

[Great Rash]

Вот вопрос, у меня такое разнообразие шрифтов и цветов, что не понятно как рулить в таком случае? Т.е. вот есть у меня 2 одинаковых блока, но с разными цветами и размерами шрифтов. Что делать? Писать отдельно такую портянку:

.fs12 {font-size: 12px;}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
и т.п.

или лучше считать, что это 2 разных блока? Но тогда у меня получается 100500 блоков...

[rash]

100500 блоков при таком подходе — не так уж и страшно.

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

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

.block-name {
    margin: ;
    padding: ;
    position: ;
    top: ;
    left: ;
    …
}

.block-name-mod-important {
    font-size: 115%;
    color: blue;
    font-family: serif;
}

ну и записывать «канонический» блок как class="block-name", а модифицированный — как class="block-name block-name-mod-important". Как-то вот так.

[Great Rash]

Ок, спасибо! Попробую применить на следующем проекте.

Кто еще что-нить посоветует?

[swetlana]

в последнее время тоже часто достаются css из 100500 строк.

делаю так: выстраиваю стили для каждого блока в одну строку.

Сами строки при этом табуляцией отбиваю, отображая иерархи, когда это возможно.

Общие стили для блока идут первыми.

Каждый логический блок отбивается пустой строкой и комментарием.

Получается что-то в таком духе:

/* registration form */
	form.registration { border-top: 3px solid #cac3d8; }
		form.registration fieldset { overflow: hidden; padding-bottom: 32px } form.registration fieldset+fieldset { border-top: 1px dashed #cac3d8; }
			form.registration fieldset.submit { border-top: 3px solid #cac3d8; padding: 16px 0 0 200px; }
			form.registration h3 { font-weight: bold; padding: 16px 0; font-size: 16px; background: transparent; }
		form.registration label { display: block; line-height: 28px; float: left; clear: left; width: 200px; }
			form.registration fieldset.personal label { color: #71ad03; }
			form.registration fieldset.password label { color: #f40b6d; }

Вроде управляюсь с таким, хотя портянки бывают и по паре тысяч строк.

[Great Rash]

А я вот наоборот, в последнее время начал отходить от табуляции. Оказалось, что это очень неудобно. Ну по крайней мере мне.

В целом мысль тоже понятна. Спасибо.

[swetlana]

…Оказалось, что это очень неудобно…

а можно с этого места поподробнее?

Почему неудобно?

[Great Rash]

Ну вот хз... при большой вложенности доп. блоков не очень удобно читать конструкции вида:

.class {...}
    .class .inner {...}
        .class .inner .deeper-element {...}

гораздо удобней (мне) отбивать пустой строкой и внутренние элементы тоже:

/*====== Block ======*/
.class {...}

.class .inner {...}
.class .inner .deeper-element {...}

.class .inner2 {...}
.class .inner2 .deeper-element {...}
/*====== end Block ======*/

[swetlana]

понятно. То есть, дело ещё и в настройке редактора.

Когда круто вложенные стили начинают переноситься на другую строку — да, нехорошо.

Я у себя делаю так:

Все переносы с большим отступом.

[Great Rash]

Не, я работаю в Notepad++ и там ничего не переносится. Просто все равно не удобно.

[rash]

О ужас, кто-то пишет блоки стилей в одну строку? Зачем?!!

Если вы делаете это не по собственной воле — подмигните.

[Great Rash]

Я делаю это по собственной воле. Это оказалось удобней чем писать каждое правило на отдельной строке. Серьезно.

[Int]

Удобней для чтения или для написания?

[Great Rash]

Для чтения.

[rash]

Я делаю это по собственной воле. Это оказалось удобней чем писать каждое правило на отдельной строке. Серьезно.

Наверное, мы читаем по-разному

Удобнее так удобнее, но у меня такой подход не задержался.

[Great Rash]

Ну я ж не навязываю. На вкус и цвет товарища нет.

[rash]

Ну я ж не навязываю. На вкус и цвет товарища нет.

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

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

[s0rr0w]

Расскажу, пожалуй, к чему я пришел.

Весь код бъется на секции

• переопределение стилей тегов
  
• основные классы
  
• модификаторы
  
• печатная версия
  
• другие медиа (если есть)

Основные классы делятся на логические блоки.

Весь код строится по принципу базис + модификаторы.

Например, нужно сделать некую плашку

.plateBlock { margin: 10px 0px;}
.plateBox { padding: 10px }

<div class="plateBlock">
  <div class="plateBox">
    Content
  </div>
</div>

Если плашка имеет специфический фон, то создаем модификатор, например .important { background: #900; } и добавляем этот класс plateBlock'у

В итоге получается набор базисной верстки и мешок всевозможных модификаторов. Однако данный подход требует сократить до минимума использование специфичности. Уж очень она сильно мешает в больших проектах.

Через время проводим рефакторинг и частоповторяемые вещи переносим в базис, выкидывая или видоизменяя модификаторы.

[Great Rash]

Спасибо. Я отчасти использую что-то подобное, только сильно упрощенное. И над этим тоже надо будет подумать.