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

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

Коснусь сегодня порядка в файлах 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-файла можно применить чистку и сжатие с помощью онлайновых сервисов (раз, два). Тогда для сайта можно залить сжатый файл(ы), а для себя оставить оригинальный вариант.

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

2 комментария

aleks_lekia

Привет. Класный шаблончик. У меня тоже блог на MaxSite CMS: kabee.net.ru Может поделишся шаблоном?

Увы и ах! Он такой - один.