Организация кода в css-файлах

Я люблю порядок.

Коснусь сегодня порядка в файлах css. В интернете можно найти достаточно информации о том, как оптимизировать код, сделать его понятным и хорошо читаемым. По крайней мере, для самого разработчика ;-).

Предлагаю ознакомиться с парой таких положений, которым стараюсь следовать сам.

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

С помощью комментариев делим файл на несколько структурных блоков. В моем случае это

/*Reset*/
/*Global*/
/*Structure*/
/*Mix*/

Reset — в этом блоке выполняется общий сброс полей и отступов. Для краткости обозначаю его просто /*r*/. По большому счету тут можно применить один из двух вариантов: * {margin:0; padding:0} или воспользоваться решением Эрика Мейера.

Global — здесь составляются глобальные правила, характерные для для всего сайта (документа) в целом: ссылки, параграфы, заголовки и тд.:


/*g*/
body {
	font:62.5%/1.4 Georgia, serif; color:#000;
}
a {
	color:#0000cd;
}
a:hover {
	color:#cd0000;
}
h1,h2,h3 {
	font-family:Arial, sans-serif; color:#f00;
}
p {
	margin-top:10px;
}
...
/*/g*/

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


/*str*/
...
#header {
	height:50px;
	color:#ff0;
}
#main {
	float:left;
	background:#ccc;
}
#sidebar {
	float:right; width:280px;
}
#footer {
	height:50px; border:2px dotted #808080;
}
...
/*/str*/

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


/*mix*/
...
#sidebar ul li {
	float:left; 
	text-align:center;
}	
	#sidebar ul li a {
		text-decoration:none;  color:#556b2f;
	}
	#sidebar ul li a:hover {
		color:#228b22; 
	}
#footer p {
	text-align:left;
}
#footer a { 
	color:#f08080;
}
...
/*/mix*/

Табуляция правил и группировка свойств

Отделение дочерних элементов от родительских табуляцией может сделать код более читаемым и позволит оценить иерархию и структуру html-документа, к которому данные стили применяются. Каждое правило я записываю примерно по такой схеме: строка с селектором + открывающая угловая скобка, с новой строки начинается перечисление свойств и их значений, закрывающая угловая скобка ставится опять на новой строке (примеры выше). В целом, весь перечень объявлений отбивается табуляцией.

Что касается группировки свойств, мне по душе гибридная схема, когда в одну строку записываются все, что касается блочной модели и позиционирования элемента; в следующую строку записывается все, касающeеся внешнего вида элемента (цвет, шрифт, фон и тд.). Как дополнение, можно использовать третью строку, например для хаков или селекторов css3. Внутри каждой строки тоже существует сортировка свойств. Можно располагать их в алфавитном порядке или придумать какую-то свою схему:


div {
	position:fixed; top:20%; width:450px; margin:15px; padding:5px; 
	font-size:120%; color:#000; background:#eaeaea; 
	border-radius: 5px;
}

К сожалению, там где есть положительные моменты, найдутся и отрицательные. Благодаря всем этим преобразованиям, код немного увеличивается в размерах. Если вам дорог каждый байт, для css-файла можно применить чистку и сжатие с помощью онлайновых сервисов (раз, два). Тогда для сайта можно залить сжатый файл(ы), а для себя оставить оригинальный вариант.

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

Медная поляна