Структура CSS

22 April, 2005

XHTML/CSS, Полезности

Когда 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-элементы. (попробуй что-нить найди потом…)

Но это как по мне экзотика – не для меня точно.

Откуда черпал

Feedback

Хотелось бы услышать чужие наработки…

XHTML/CSS, Полезности

10 комментариев к “Структура CSS”

netklon | 1. 23 April, 2005

У меня идет таким образом, что элементы визуально расположенные рядом, недалеко друг от друга находятся и в CSS-файле.
В начале файла – описание базовых элементов контента (h1-h4, p, table, ul, ol).
Собственно недавно пришла мысль заранее отверстать разные лэйауты (2, 3 колонки и пр.) и вынести их в отдельные файлы.

ganges | 2. 25 April, 2005

С недавних пор сторонник именно такого разделения
screenmaster.css имортирует файло в таком порядке

layout.css
textformatting.css
navigator.css
colorizer.css

После того. как, к сожалению интуитивно :) пришло понимание того, как работает в этом случае каскад. – такое написание CSS – просто фантастика

файлы получаются
а) удобные для редакции
б) маленькие по размеру
в) глобальные (ну да, ВСЯ типографика или ВСЕ цвета – одним махом)

Из того, что no doubt , :) , файлы получаются меньше по размеру – это железяк. С умением если то примерно на треть меньше.

Проблема с которой я столкнулся из нерешенных :)

Где, как вы считаете, нужно описывать элемент интерфейса, скажем навигацию

#nav dl dd a {} ?

#nav dl dd это безусловно layout

a – это навигация

если пользоваться “моим” методом разделения стилей на файлы, и чтобы действительно layout и navigator были ОТДЕЛЕНЫ друг от друга, учитывая каскад нужно писать так (ИМХО, конечно)

в файле layout
#nav dd {
стиль для ddшки
}

в файле navigator

#nav dd a {
стиль для ссылки
}

Очевидно, что #nav dd написано 2 раза (зато все работает правильно в IE 6.0, Opera, Konqueror, Mozilla)

Насчет названий

Если ты постоянно делаешь бестабличную верстку (ну кто бы сомневался), то рано или поздно (я – поздно :) ) придешь к тому. что эквивалентные area стОит называть одинаково. Как ты говоришь. header он и в африке header, а nav-global это глобальная навигация которая есть у каждого сайта (ну, почти у каждого)
если выработать себе semantic name-set, то пользоваться им очень удобно всегда. Более того, Энди Кларк (aka Malarkey) даже предлагал расшаривать этот name-set, чтобы типа всепользовались одинаковым, но это, я думаю врядли получится.

slaff | 3. 28 April, 2005

Не скажу, что я мега-профессионал в верстке. Но в css уже довольно длительное время стараюсь придерживаться такой структуры:

1). Типография
2). Структура сайта
3). Элементы форм
4). Другие дополнительные теги

Еще удобно разделять такой вариант на 4 файла и импортировать их в один главный, как описал ganges.

Rad | 4. 30 April, 2005

Делаю по другому. На сайте положим сверху-вниз шапка, меню (слева) и текст (справа), подвал. Ну в каждом ещё свои дела.

В CSS всё идёт соответственно – сверху-вниз и слева-направо, как и на экране всё выглядеть будет.

alles | 5. 3 May, 2005

Что-то типа:

/*Colors*/
цветовые наполняющие
/*Fonts*/
гарнитуры

ну и т.д.

akella | 6. 4 May, 2005

Спасибо за инфо. Кстати Даг Бауман как раз опубликовал пост на эту тему. Можно сказать усовершенствование “моего” (спертого позаимствованного у него )) метода.

Dest | 7. 30 May, 2005

Кому ка удобней.. тут схемы нет

plexman | 8. 2 June, 2005

При этом строка ТексТексТекст оказывается за пределами блока. Как решить эту проблему?
Код:

31 мая, 2005
  Заголовок новости

ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст

div.maincontent {
background:#fff;
border-top:0;
border-left:0;
border-right:1px solid #3E4E5F;
border-bottom:8px solid #3E4E5F;
height:auto;
float:left;
width:456px;
voice-family:inherit;
margin: 0px;
padding:8px;
}

cssing :: Архив :: cssing 2005 | 9. 27 December, 2005

[…] вные. Как сжимать CSS – о том как сократить размер(для загрузки) раздувшихся CSS файлов. Структура CSS – какими комментами размечать CSS файл для удобства. Животрепещущий вопрос для […]

Alexandr | 10. 9 July, 2011

Использование одного файла со стилями – полная чушь. Сам потом запутешься.

Оставить комментарий