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

24 февраля 2010, 22:02 Павел Марковнин HTML и CSS рейтинг

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

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

Итак, поехали!

Информативные название файлов

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

Информативные названия файлов

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

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

имя файла;
назначение хранящихся в этом файле стилей;
проект;
автор.

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

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

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

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

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

Оглавление CSS файлов

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

Оформление структуры CSS файла

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

Вложенные стили

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

Вложенные стили CSS

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

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

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

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

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

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

Заключение

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

css, стили.

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Теоретически похожие статьи

Также обратите внимание на другие статьи раздела «HTML и CSS».

Комментарии — 56

RSS

24 февраля в 22:49 iXax

Долгое время пытался писать стили элемента в столбик, но все-же отдаю предпочтение стилю: «в строку», но с алфавитным порядком.
Вложенност ь показываю отсутпами от названия элемента до фигурной кобки. Полчается такая же лесенка, но справа от названия элемента :)
24 февраля в 22:51 iXax

ЗЫ: автор, Coda удобнее Espresso?
Как по мне, так Espresso более привлекателен в плане описания стилей, написания HTML кода.
24 февраля в 23:00 ]]>Grin]]> [t]

Espresso не пользовался, а Coda мне очень нравится ;-)
24 февраля в 23:31 ]]>Evgenij]]> [t]

Под всеми пунктами подпишусь, кроме дополнительных пробелов.
Во-первых, читабельнее без пробелов; во-вторых, не представляю как можно себя заставить столько раз стучать по пробелу, чтобы получился столбик.
24 февраля в 23:39 ]]>remal]]>
Свойства по алфавиту бесполезны. Лично я разделяю свойства на группы display, расположение, ширина+высота, граница+фон+паддинг, отображение внутренних элементов (valign), стили текста. Каждая группа разделена пустой строкой. Получается примерно так:
```
#some-id {
    display: block;

    position: absolute;
    top: 10px;
    left: 10px;

    width: 180px;

    border: 1px solid red;
    background: ....
    padding: ...

    color: black;
}
```
Дополнительные пробелы для отделения свойств от значений совершенно не делают код читабельные, зато добавляют огромный геморрой при его написании.
24 февраля в 23:40 ]]>Albanec]]>

спасибо за статью
24 февраля в 23:48 ]]>adw0rd]]> [t]

Evgenij, +1
Еще после таких вот мастеров откроешь файл в своем редакторе, и наблюдаешь кашу. Ибо там и табы и пробелы... После чего я обычно матерюсь, а потом применяю "автоматическоре форматирование" от Eclipse
25 февраля в 0:21 ]]>Grin]]> [t]

Evgenij, читабельнее когда есть общее выравнивание.

adsw0rd, просто дополнительные отступы (между свойствами и значениями) нужно делать только пробелами, тогда все будет отлично ;-)
25 февраля в 0:35 ]]>Evgenij]]> [t]

По алфавиту получается только если я стили из фаербага копирую.
А во время работы с алфавитом у меня не очень )
25 февраля в 1:00 ]]>hiway]]> [t]

Спасибо. Есть такое выражение: «Порядок бьет класс!». Так вот в CSS порядок только подтверждает класс.
25 февраля в 1:07 ]]>adw0rd]]> [t]

Grin, скажите это "мастерам" ;-)
25 февраля в 1:44 gm1

@adw0rd
скоро как раз на пыхе забабахаю тему про отступы)

Комментарий Evgenij + комментарий remal и будет самое то.
25 февраля в 1:59 ]]>Grin]]> [t]

Я смотрю у нас тут жаркая дискуссия разгорелась — за 4 часа 12 комментариев ;-)
25 февраля в 2:31 Антон

remal +1 - почти также делю. только я делю на цветакартинки(текст, фон); размеры(отступы, ширина высота); стиль текста(начертание, выравнивание); свойства элемента(display, position, прозрачность, итп). В пробелах и алфавите тоже не вижу смысла. названия соблюдаю, якоря ставлю... единственное чего не делал - вложенность. Остальное как-то само привыклось =) всё равно спасибо за статью, Павел.
25 февраля в 2:44 ]]>adw0rd]]> [t]

@gm1
хех, а вы кто?
25 февраля в 9:15 ]]>dixon]]>

> Информативные название файлов

Понимаю, что там акцент на именах. Но резануло глаза, что хорошо 6 файлов а плохо 3. Чем меньше файлов стилей и скриптов тем лучше - страница будет грузиться быстрее за счет меньшего количества открываемых конектов... Т.е. 6 это плохо а три лучше :)
25 февраля в 9:42 ]]>Grin]]> [t]

dixon, я в заключении к статье написал насчет количества файлов ;-)
25 февраля в 9:57 Николай [t]

Вообще-то уже есть такой инструмент http://www.cleancss.com/
С уважением, Николай.
25 февраля в 11:06 ]]>Адвокат]]>

Согласен с теми, кто положительно отозвался в комментах. Павлу за статью спасибо! Этой статьей он избавил меня от скуки - пойду переделывать свой css.
25 февраля в 11:48 German

Один момент,
ie6.css, ie7.css и прочие подгружаются в global.css ???
А как же GZIP сжатие CSS? Получиться что будет сжат один только global.css

Разве нет?
25 февраля в 11:54 ]]>sofcase]]> [t]

Про инструмент сжатия был бы рад почитать. Спасибо за статью, некоторые аспекты соблюдал, некоторые нет :)
Уже давно читаю ваш бложек, а отписался впервые :)
25 февраля в 12:21 ]]>Grin]]> [t]

German,
нет, все эти файлы, если они для одного типа (атрибут media в теге link) и браузера (например, IE 7) на сервере собираются в один файл, сжимаются и только потом отдаются браузеру.

sofcase,
Так комментируй почаще — тебе не сложно, а нам приятно ;-)
25 февраля в 12:22 ]]>Cuprum]]> [t]

Добавлять пробелы в угоду читаемости смысла не вижу, как и записывать в столбик. Я использую такую группировку: сначала все свойства связанные с позиционированием (float, position...), потом свойства отвечающие за внешний вид (color, font и тд.) потом все остальное (возможные хаки и свойства CSS 3). Названное количество файлов тоже излишне. В подавляющем большинстве случаев можно обойтись style.css и ie.css + print.css
25 февраля в 12:46 ]]>Lopar]]> [t]

По последнему пункту категорически не соглашусь - это красиво для обывателя, но совершенно нечитабельно в процессе верстки. Когда параметр рядом со строкой - то намётанным взглядом фокусируешься на двоеточии и видишь слева - параметр, справа - значение. И так пробежавшись глазами нормально вычитываешь всё. А если делать лишние пробелы то это только добавит путаницы - не всегда просто на глаз прикинуть - какое из этих стоящих в ряд значений соответствует воон тому параметру. Приходится делать лишние телодвижения - выделять строку, бегать курсором, считать строки... ИМХО.

По поводу алфавитного порядка: давайте делать щи - отдельно, котлеты - отдельно. Более практично будет разделять по группам параметров: одни - за цвет, другие - за размер, третьи - за позицию на странице. В результате такой разбивки правя код ты уже цепляешь глазами не одну спрятанную строчку, а группу строчек, отвечающих за сходные задачи. Объектов поиска становится меньше - искать становится проще.
25 февраля в 13:06 ]]>interpaul]]>
Мне наоборот удобнее писать все правила в одну строку. В этом случае табуляция для обозначения вложенных стилей тоже становится не нужной, т.к. селекторы выстраиваются один под другим и естественным способом образуют каскад, который очень легко считывается глазом.

Способ форматирования, описанный автором, удобен для изучения кода (например, опубликовать новое решение в блоге). Т.е. код на экспорт.

Для поддержки своего кода, удобнее 1 правило на 1 строку: когда нужно что-то исправить, ты обычно уже посмотрел в firebug'е название селектора и номер строки. Меньше строк в файле - меньше скроллить и больше селекторов помещается на экране - быстрее найти нужное правило. Глаз ищет по вертикали. Нашел нужный селектор - ищешь по горизонтали нужное свойство.
```
.module_flexRc_mmenu {width:790px;margin-bottom:29px;overflow:hidden;}
.module_flexRc_mmenu ul {margin:0 -2px;padding:0;list-style:none;float:left;}
.module_flexRc_mmenu ul li {float:left;display:inline;margin:2px;padding:0;background:none;}
.module_flexRc_mmenu ul li a {display:block;}

.small,
.news_dt,
.modifydate {color:#756b5d;}
```
Внутри селектора зачастую не использую ни табуляторов, ни даже пробелов (ориентироваться помогает подсветка кода: пользуюсь Notepad++ - у него лучшая подсветка кода, какую я видел, очень помогает бороться с опечатками). Так файлы получаются компактнее и их потом уже не нужно чистить от лишних табов и пробелов. Про сортировку свойств внутри селектора как-то вообще не задумываюсь, не до этого. Обычно получается боксовая модель левее, а шрифты и цвета правее.

В остальном полностью согласен с автором. А вот за идею с оглавлением отдельное спасибо. Попробую. В том Notepad++ выделил слово из оглавления, нажал Ctrl+F3 и быстро перескочил на нужный раздел. Должно быть удобно.
25 февраля в 14:04 ]]>msi]]>

Как по мне, то минимизацией файлов CSS лучше заниматься не на сервере, а непосредственно перед деплойментом. Вот, например, так можно минимизировать файлы CSS, автоматически из Visual Studio
25 февраля в 14:45 ]]>rotor]]> [t]

Пункты «Вложенные стили» и «Дополнительные пробелы для отделения свойств от значений» весьма спорные.

Первый — трудно поддерживать если над проектом работают несколько человек и случаются частые изменения в HTML-коде. Проще просто разбивать CSS-свойства в стилевом листе по логическим блокам /* header */, /* sidebar */, /* footer */ и т.д.

Второй — в практике не встречал и никакого удобства в нём не вижу.
25 февраля в 16:15 ]]>Alazavar @ Израиль]]>

Все пункты заслуживают внимания и полезны - кроме последнего. Конечно со столбиками гораздо читабельней и проще, но придется потерять не мало времени в муторном сдвигании строки пробелом...
25 февраля в 16:44 German

Grin, так тут то и оно... Вы говорите если они одного типа (атрибут media в теге link)

А в примере, как я понимаю ie6.css, ie6.css, mobile.css подгружаются в файле global.css а там атрибут media не укажешь! И туда скрипт не доберется!

Получается что не получиться вам сжать подключаемые файлы!
25 февраля в 16:51 ]]>Grin]]> [t]
German, смотрите как это работает. У меня на сервере есть три файла: common.css, articles.css и sidebar.css. Мне нужну их все собрать именно в такой порядке, сжать и отдать браузеру как один. Для этого я пишу специальный скрипт, которому сообщаю эти файлы:
```
compress.php?files=common.css,articles.css,sidebar.css
```
25 февраля в 17:14 German

Интересное решение...
В своих проектах я использую php_speedy, а он может сжимать CSS подключенные только с HTML.
25 февраля в 19:23 ]]>Kykyryzo]]>

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

26 февраля в 2:35 ]]>Evgenij]]> [t]

Кукурузо, такой вопрос уже был в разделе вопрос-ответ. Про пхп.
Цитирую себя (очень люблю себя цитировать):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');

  ob_end_flush();
?>

А какой язык интересен вам?

26 февраля в 2:38 ]]>Evgenij]]> [t]

Вообще, есть очень хороший инструмент YUI Compressor.
Вот, например, его имплементация для .net YUI Compressor for .Net
26 февраля в 10:47 ]]>msi]]>

@Evgenij - Об этом инструменте я и написал в своем предыдущем комменте :)
27 февраля в 13:19 ]]>Алексей Шинкевич]]> [t]

Может быть есть какой-то инструментарий по автоматическому форматированию CSS с учетом вложенности?
28 февраля в 18:45 ]]>Максим Покровский]]> [t]

>> Свойства по алфавиту
Зачем? Поиск есть же. Если и структурировать то согласно html структуре стили шапки выше, стили футера в самом низу css.
3 марта в 14:29 Суперhерой

Автору статьи спасибо, статья имеет место быть.
С точки зрения клиента скрипт сжатия с кэшированием для таких дел просто необходим.
А дизайнерам хорошо было бы сделать обратное декодирование.
Гениальные решения стилизации листинга родили практики СИ. (тысячи удобочитаемых страниц).
3 марта в 22:00 ]]>Max]]> [t]

Это конечно полезно, но у меня никогда нет времени на уборку в файлах css. Иногда об этом жалею. P.S. Идею инструмента поддерживаю!
4 марта в 10:19 ]]>Александр]]>

remal написал:

Лично я разделяю свойства на группы display, расположение, ширина+высота, граница+фон+паддинг, отображение внутренних элементов (valign), стили текста. Каждая группа разделена пустой строкой.

Разделять или сортировать свойства вообще смысла нет -- не так уж их много, обычно...
4 марта в 10:34 ]]>Александр]]>

dixon написал:

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

Не смешите. Разницы абсолютно никакой. Ни вы, ни пользователь никогда не заметите из какого количества файлов стилистика грузится. Один, три или шесть -- вопрос исключительно удобства для разработчика.

P.S.
И, естественно, всегда можно это дело ужать, собрав в единый файл и выкинув стройное форматирование.
4 марта в 20:45 ]]>Апокалиптик]]> [t]

Размер css однозначно влияет на скорость загрузки.
Иначе зачем существуют сервисы тип styleneat.com которые ужимают файлы css
5 марта в 7:52 ]]>Александр]]>

Размер css влияет на скорость, не спорю. Я не об этом.
Имелось ввиду то, что 20, допустим, кб CSS одним файлом будут для пользователя идентичны 20 кб CSS раскиданным по файлам нескольким.
5 марта в 10:38 ]]>Grin]]> [t]

Александр, есть разница. Когда у вас 20 файлов, это означает, что будет сделано 20 запросов к серверу
7 марта в 1:15 ]]>mmaarrina]]>

#Вложенные стили
Да, это плюс АДИН, правда не так как показано на скриншоте... это ж с ума сойти можно будет)

#Свойства по алфавиту
Блин, а вот это вот тема! Долго мучался с вопросом порядка элементов.
Делаю обычно так: сначала блочная модель, потом стили текста, затем бекграунды и бордеры, затем всё остальное... надо будет попробовать действительно по алфавиту.

#Дополнительные пробелы для отделения свойств от значений
хах, а вот это очень даже интересно! спасибо, будем использовать!
12 марта в 13:45 ]]>Катя ]]>

супер написана статья, хорошо поучится в кого то
21 марта в 2:25 ТОЛЬСТЫЙ ТРОЛЬ

ПАСИБАА
21 марта в 2:58 ]]>adw0rd]]> [t]

Как отписаться от комментов? Ссылка которая приходит на почту - не работает, все равно приходят уведомления. Уже изрядно достало...

>Для того, чтобы отписаться от уведомлений, перейдите по этой ссылке:
>http://vremenno.net/unsubscribe.php?uid=
21 марта в 15:10 ]]>Grin]]> [t]

adw0rd, у вас почему-то неполная ссылка приходит
21 марта в 21:45 ]]>adw0rd]]> [t]

Не, она полная, ссори сам вас запутал. Вот ссылка http://vremenno.net/unsubscribe.php?uid=d18748449ae998e32bf878dd5eb24a62

по переходу - редиректит на главную и все, а камменты снова приходят
17 апреля в 22:52 Евгений

"Вложенность стилей должна соответствовать вложенности элементов вашего HTML документа"
бла бла бла.
Автор слышал о наследовании стилей? Автор пробовал писать CSS с целью "минимум веса"? Автор пытался писать валидный год в принципе?

Если бы на все вопросы было "да", то решение с вложенностью не пришло бы ему в голову.
А при условии, что это решение все же родилось, то включив мозг, можно смело говорить о том, что рекомендовать такое решение просто нельзя.

И не сдержался. Через id (#) стили пишут только идиоты.
17 апреля в 22:59 ]]>Grin]]> [t]

Евгений, это вопрос удобства. Если вам что-то неудобно, это еще не значит, что это неудобно другим.

Насчет стилей по id — вы никогда не пишете стиль через id? Даже если такой элемент заведомо один на странице?
26 апреля в 9:09 ar-

Евгений (17 апреля в 22:52)
это ты тупой баран, если - "через id (#) стили пишут только идиоты"

Статью в топку по ряду причин, например одна из них, это - !!!! в любой фирме дизайнеры оттягивают 3 месяца макет, а верстальщику дают время выполнения только на вечер и тут просто нафиг ненужны никакие правила. Побыстрей бы сверстать, да чтоб работало. !!!!
26 апреля в 12:18 ]]>Lopar]]> [t]

Вот из за таких мудаковатых фирм, ar-, на нас ВСЕХ и гонят пургу высмеивая качество.

Блин, что это за убожество - делать вечером на коленке, за два часа до cдачи, и ГОРДИТЬСЯ этим?!

А потом таким как я отлавливать говнокоды в ваших невозбранных проектах...
9 июня в 13:25 dead_star

Признаться честно, когда-то давно, когда я только начинал изучать CSS я пробовал использовать "Вложенные стили", но быстро понял что это неудобно и не читабельно
Как говорили до меня "Свойства по алфавиту" не удобно в написании и исследовании, гораздо удобней группировать свойства по их назначению
Использование "Дополнительных пробелов" тоже вещь сильно сомнительная
Этот вариант не поддерживаю

На тему сбора нескольких css файлов в один
Исходя из статьи(ru) Стива Сандерса о скорости загрузки фала стилей,
получается что выгодней использовать несколько файлов так как файлы будут загружаться параллельно и в результате загрузятся быстрей чем один большой файл
28 июля в 19:55 Fruzenshtein [t]

+1

Спасибо за статью=)

Имя (надо бы заполнить это поле)
дополнительная информация

Эл. почта (используется для Граватарки)
Домашняя страница
Имя в Твиттере

Разрешенные теги Текст сообщения (надо бы заполнить это поле)

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

уведомлять о новых комментариях к статье

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

Информативные название файлов

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

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

Вложенные стили

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

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

Заключение

Автор статьи: Павел Марковнин

Понравилась статья?

Теоретически похожие статьи

Комментарии — 56

Спонсоры

Последние комментарии

Последние ответы на вопросы

Популярные статьи

Совершенно случайные статьи

Блогорол