Структура CSS
22 Apr, 2005Когда CSS файлы разрастаются на более чем 10 килобайт, встает проблема как их структуризировать. Наверняка все её для себя уже решили. Делюсь своим решением и еще парой подсмотренных.
Как это делаю я
Впервые подобная проблема встала когда я писал CSS для укр.нет. Я воспользовался довольно простым методом. Мой шаблонный CSS выглядит примерно так:
/*layout
---------------------------------------------------------------------------------------------- */
структура страницы - всякие float, width и position для sidebar etc
/*assorted
---------------------------------------------------------------------------------------------- */
ссылки, списки - глобальные стили
/*flashrows
---------------------------------------------------------------------------------------------- */
стили для баннеров
.banner{display:none;(forever)}
/*header
---------------------------------------------------------------------------------------------- */
хедер он и в африке хедер
/*nav
---------------------------------------------------------------------------------------------- */
как и навигация
/*content
---------------------------------------------------------------------------------------------- */
Контент из Кинг - самый обьемный раздел CSS файла.
/*sidebar
---------------------------------------------------------------------------------------------- */
/*footer
---------------------------------------------------------------------------------------------- */
То есть я упорядочиваю их по блокам. А сами блоки по порядку следования в коде.
С тем исключением что layout и assort идут в начале. И вообще их я обычно выношу в отдельный CSS файл. Потому как в него лезу только если что то глобальное поменялось. В результате получается что то вроде layout.css и base.css.
Это еще и для того что бы метаморфозы для "оперов" были не такие разительные. layout.css обычно около 1килобайта успевает загрузиться раньше чем опера покажет контент ВООБЩЕ без стилей.
Кроме того такие длинные разделители позволяют легко ориентироваться в файле. Лишних 200 байт не жалко...
wired
Для этого сайта стили упорядочиваются очень похоже. Просто потому что свой вариант я спер у Дага Баумана, в одной из его более поздних работ ;). Правда там еще разделяются стили по цветам. Но это вызвано спецификой - у этого сайта каждый день новая цветовая схема. В целом же все распределено по блокам.По другому
Еще один вариант - сделать font.css. Я пока правда не созрел для такого разделения. Но чувствую рано или поздно придется. Обычно в этом случае делают три CSS файла layout.css, fonts.css, colors.css. Однако это на любителя. Таким образом можно "обескрасить" или менять типографику странички за минимальное время - но лично я в этом не вижу особой выгоды.Экзотика
И еще два метода которыми реально пользуются буржуи-geek'и.Первый - пишем один CSS файл где все упорядочиваем в алфавитном порядке. То есть стили для acronym идут перед стилями для body (ИМХО плохо)
Второй - опять же один файл где сначала идут все стили с id, потом все с классами и наконец html-элементы. (попробуй что-нить найди потом...)
Но это как по мне экзотика - не для меня точно.
10 комментариев к “Структура CSS”