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

24 февраля 2010

3.7 из 5

Привет,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

ЗЫ: автор, Coda удобнее Espresso?
Как по мне, так Espresso более привлекателен в плане описания стилей, написания HTML кода.

Espresso не пользовался, а Coda мне очень нравится ;-)

Под всеми пунктами подпишусь, кроме дополнительных пробелов.
Во-первых, читабельнее без пробелов; во-вторых, не представляю как можно себя заставить столько раз стучать по пробелу, чтобы получился столбик.

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

#some-id {
    display: block;

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

    width: 180px;

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

    color: black;
}

Дополнительные пробелы для отделения свойств от значений совершенно не делают код читабельные, зато добавляют огромный геморрой при его написании.

спасибо за статью

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

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

adsw0rd, просто дополнительные отступы (между свойствами и значениями) нужно делать только пробелами, тогда все будет отлично ;-)

По алфавиту получается только если я стили из фаербага копирую.
А во время работы с алфавитом у меня не очень )

Спасибо. Есть такое выражение: «Порядок бьет класс!». Так вот в CSS порядок только подтверждает класс.

Grin, скажите это "мастерам" ;-)

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

Комментарий Evgenij + комментарий remal и будет самое то.

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

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

@gm1
хех, а вы кто?

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

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

dixon, я в заключении к статье написал насчет количества файлов ;-)

Вообще-то уже есть такой инструмент http://www.cleancss.com/
С уважением, Николай.

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

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

Разве нет?

Про инструмент сжатия был бы рад почитать. Спасибо за статью, некоторые аспекты соблюдал, некоторые нет :)
Уже давно читаю ваш бложек, а отписался впервые :)

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

sofcase,
Так комментируй почаще — тебе не сложно, а нам приятно ;-)

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

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

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

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

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

Для поддержки своего кода, удобнее 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 и быстро перескочил на нужный раздел. Должно быть удобно.

Как по мне, то минимизацией файлов CSS лучше заниматься не на сервере, а непосредственно перед деплойментом. Вот, например, так можно минимизировать файлы CSS, автоматически из Visual Studio

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

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

Второй — в практике не встречал и никакого удобства в нём не вижу.

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

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

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

Получается что не получиться вам сжать подключаемые файлы!

German, смотрите как это работает. У меня на сервере есть три файла: common.css, articles.css и sidebar.css. Мне нужну их все собрать именно в такой порядке, сжать и отдать браузеру как один. Для этого я пишу специальный скрипт, которому сообщаю эти файлы:

compress.php?files=common.css,articles.css,sidebar.css

Интересное решение...
В своих проектах я использую php_speedy, а он может сжимать CSS подключенные только с HTML.

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

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

<?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();
?>

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

Вообще, есть очень хороший инструмент YUI Compressor.
Вот, например, его имплементация для .net YUI Compressor for .Net

@Evgenij - Об этом инструменте я и написал в своем предыдущем комменте :)

Может быть есть какой-то инструментарий по автоматическому форматированию CSS с учетом вложенности?

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

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

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

remal написал:

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

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

dixon написал:

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

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

P.S.
И, естественно, всегда можно это дело ужать, собрав в единый файл и выкинув стройное форматирование.

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

Размер css влияет на скорость, не спорю. Я не об этом.
Имелось ввиду то, что 20, допустим, кб CSS одним файлом будут для пользователя идентичны 20 кб CSS раскиданным по файлам нескольким.

Александр, есть разница. Когда у вас 20 файлов, это означает, что будет сделано 20 запросов к серверу

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

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

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

супер написана статья, хорошо поучится в кого то

ПАСИБАА

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

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

adw0rd, у вас почему-то неполная ссылка приходит

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

по переходу - редиректит на главную и все, а камменты снова приходят

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

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

И не сдержался. Через id (#) стили пишут только идиоты.

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

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

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

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

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

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

А потом таким как я отлавливать говнокоды в ваших невозбранных проектах...

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

На тему сбора нескольких css файлов в один
Исходя из статьи(ru) Стива Сандерса о скорости загрузки фала стилей,
получается что выгодней использовать несколько файлов так как файлы будут загружаться параллельно и в результате загрузятся быстрей чем один большой файл

+1

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

Я считаю, что в стилях показывать вложенность необходимо через название класса, а не через отступы. Лично я использую такой вариант записи:

.header { .. }
.hdr-logo { .. }
.hdr-search { .. }
.hsrch-but { .. }
/* либо */
.hdr-srh-but { .. }

Показывать вложенность конечно информативно, но затем в таком файле что то быстро найти со временем становиться практически не возможно без поиска. Тем более многие верстальщики используют различные стили напсиания CSS, а зачастую над проектом трудиться более 1 человека. Поэтому, наверное, необходимо использовать самый распространенный и "упрощенный" тип записи, который будет понятен каждому.

Полезное узнал! Спасибо!

1 - зачем столбик если делать сжатие css?
2 - удобно разделять по версиям css v1.0 v1.1

Я использую сервисы авторазметки CSS, типа procssor.com.
Удобно, быстро. Скоро буду у себя на сайте это испытывать.

Я вот пробую на MODx сайты писать. Так, что скажу что ещё не видел более удобного движка для соблюдения веб-стандартов. В смысле и HTML valid и CSS (блин, кроме SyntaxHiglighter).

этот скрипт будет очень полезен

Новый комментарий

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

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

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

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

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

Мы в соцсетях

Блогорол