Делаем более понятные и удобные файлы стилей

Привет,

Сегодня мы поговорим об организации файлов стилей. Мы рассмотрим как лучше всего организовывать файлы и форматировать код внутри них, чтобы через какое-то время вы не хватались за голову от того, что стилей стало больше, а порядка и понимания что где находиться — меньше.

Итак, поехали!
Информативные название файлов

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

Описание внутри каждого файла

Описание каждого файла очень полезно как при командной работе, так и при большом количестве файлов стилей в крупных проектах. Вы можете указывать любые удобные вам параметры, лично я использую следующие:
имя файла;
назначение хранящихся в этом файле стилей;
проект;
автор.

Для одного проекта у меня было 10 файлов стилей — несколько общих и остальные для разных разделов сайта. Вот пример оформления файла, отвечающего за стили раздела статей:

Структура стилей внутри файла

Логичность и порядок описания стилей очень сильно облегчают работу, особенно в случае больших файлов.

В начале каждого файла можно делать что-то вроде оглавления:

А потом отмечать каждый из таких блоков соответствующими ему якорями:

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

Вложенность стилей должна соответствовать вложенности элементов вашего HTML документа. Это позволяет наглядно показать структуру и зависимость элементов:

Свойства по алфавиту

Такое расположение свойств позволит вам быстрее находить нужные места в коде.

Дополнительные пробелы для отделения свойств от значений

Такой способ форматирования позволит вам сделать стили более наглядными и читабельными. Посмотрите на пример на картинке ниже — какой код более читабельный?


Заключение

Безусловно, все эти ухищрения и приемы нужны только одному человеку из всей аудитории сайта — его разработчику. Поэтому не нужно отдавать стили пользователю как есть — несколько файлов со всеми комментариями, лишними пробелами и табами. Лучше всего расположить на сервере специальный скрипт, который бы собирал файлы в один в нужном порядке, убирал бы из них лишнее и сжимал бы их. Мы, кстати, думаем сделать такой инструмент тут, на Временно.нет. Как вы на это смотрите?