CSS Styleguide — улучшение читабельности кода
По завершению работы над проектом структура макета, со всеми его многочисленными классами, цветовыми схемами и шрифтами как правило, быстро забывается. Поэтому, для того, чтобы разобраться в коде по истечению некоторого времени, необходимо его структурировать, сделать понятным и практически удобным. Такой подход уменьшает сложность понимания кода и упрощает дальнейшую его поддержку. Существует несколько вариантов структурирования. Например, можно воспользоваться комментариями, наверняка всегда найдется, что записать в них после завершения проекта, это могут быть подсказки, какие-то пометки и пр.
В действительности разработчики подошли достаточно креативно к написанию комментариев и форматированию CSS файла для упрощения понимания и удобства дальнейшего обслуживания кода. Все эти креативные способы обычно группируются в т.н. CSS styleguide — части кода CSS, упрощающие понимание структуры кода и любой другой информации, относящейся непосредственно к данному стилю. В данной статье рассмотрены 5 способов, улучшающие удобство дальнейшего понимания и обслуживания CSS-кода. Их можно использовать не только в CSS файлах, но и в любых других языках программирования. В конце статьи можно найти ссылки на ресурсы, содержащие информацию по организации и структурированию кода.
1. Разделяй и властвуй
Во-первых, определитесь со структурой макета и разделите его на наиболее важные модули. В большинстве случаев полезно разделять CSS-селекторы в соответствии с порядком следования блоков (div) и классов в вашем макете. До начала работы, сгруппируйте элементы по секциям и дайте каждой из них свои названия. Например, можете обозначить глобальные стили (body, абзацы, списки и т.д.), структуру макета, заголовки, текст, навигацию, формы и комментарии.
Для более четкого разделения фрагментов кода выберите соответствующие флаги или хорошо заметные комментарии (повторяющийся символ * подойдет для заголовков секций). Перед добавлением флага, убедитесь, что он действительно бросается в глаза при просмотре кода.
Для крупных проектов подобный подход может быть не совсем эффективным, поскольку модуль может быть слишком большим. Поэтому в подобных ситуациях необходимо разбить код на несколько файлов. Все отдельные файлы импортируются через основной файл таблицы стилей (master stylesheet). Использование основной таблицы стилей увеличивает кол-во обращений к серверу, однако делает код более элегантным, понятным и легким в обслуживании. В этом случае в документ можно включить только основной файл стилей.
/*------------------------------------------------------------------ [Master Stylesheet] Project: Some Project Version: 1.1 Last change: 05/02/08 [fixed Float bug, vf] Assigned to: Author names Primary use: Magazine -------------------------------------------------------------------*/ @import "reset.css"; @import "layout.css"; @import "colors.css"; @import "typography.css"; @import "flash.css"; /* @import "debugging.css"; */
Для крупных проектов и больших команд разработчиков будет полезно иметь лог обновлений (brief update log) и некоторую дополнительную информация о проекте, например, кто является ответственным за данный файл и для чего этот файл нужен.
В дополнение, можно включить CSS-код для отладки с набором диагностических правил, например стиль от Эрика Мейера Diagnostic Styling
Создание оглавления (TOC).
Оглавление с обзором структуры вашего кода можно добавить в начало CSS-файла. Одной из возможностей вставки оглавления является отображение древовидной структуры вашего макета, содержащей названия ID и классов в каждой ветке. Можно использовать записи вида header-section или content-group для быстрого просмотра соответствующей части кода.
Также вы можете выбрать некоторые важные элементы, которые наиболее часто будут меняться по завершению проекта. Эти классы и ID можно поместить в оглавление для более быстрого поиска и обращения к ним.
/*------------------------------------------------------------------
[Layout]
* body
+ Header / #header
+ Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
…или так:
/*------------------------------------------------------------------
[Table of contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/
Другой подход — это использование простой нумерации, без отступов. В примере, приведенном ниже, для обращения к RSS-секции вам необходимо будет запустить поиск по слову RSS. Все просто и эффективно.
/*------------------------------------------------------------------ [Table of contents] 1. Body 2. Header / #header 3. Navigation / #navbar 4. Content / #content 5. Left column / #leftcolumn 6. Right column / #rightcolumn 7. Sidebar / #sidebar 8. RSS / #rss 9. Search / #search 10. Boxes / .box 11. Sideblog / #sideblog 12. Advertisements / .ads 13. Footer / #footer -------------------------------------------------------------------*/ <!-- some CSS-code -->
/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
Создание оглавления упрощает чтение и понимание вашего кода другими разработчиками. В крупных проектах можно распечатать оглавление и держать его перед глазами при чтении кода. При работе в команде нельзя недооценивать данное преимущество, поскольку это экономит время вам и вашим коллегам.
3. Цвет и шрифты
Поскольку в CSS нет констант, вам нужно как-то выделить некоторые «переменные», которыми вы будете пользоваться. В веб разработке цвета и шрифты зачастую принимаются за «константы» — фиксированные значения, используемые многократно в коде.
Единственным способом восполнить недостаток констант в CSS является создание определений в начале CSS-файла, с обозначением констант. Обычно используется для создания цветового справочника. Это означает, что вы можете быстро найти определенный цвет, использующийся на сайте, во избежание повторений и ошибок. Если вам потребуется заменить определенный цвет, вы просто обращаетесь к справочнику, поиском находите и меняете цвет.
/*------------------------------------------------------------------ # [Color codes] # Dark grey (text): #333333 # Dark Blue (headings, links) #000066 # Mid Blue (header) #333399 # Light blue (top navigation) #CCCCFF # Mid grey: #666666 # */
Как альтернатива, вы можете описать цветовые коды, использующиеся в макете. Для заданных цветов вы показываете секции сайта, которые используют данные цвета. Или наоборот, для различных элементов дизайна вы описываете используемые цвета.
/*------------------------------------------------------------------ [Color codes] Background: #ffffff (white) Content: #1e1e1e (light black) Header h1: #9caa3b (green) Header h2: #ee4117 (red) Footer: #b5cede (dark black) a (standard): #0040b6 (dark blue) a (visited): #5999de (light blue) a (active): #cc0000 (pink) -------------------------------------------------------------------*/
Тоже самое относится и к шрифтам.
/*------------------------------------------------------------------ [Typography] Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif; Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif; Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif; Notes: decreasing heading by 0.4em with every subsequent heading level -------------------------------------------------------------------*/
4. Упорядочивание свойств CSS
Если какие-то части кода пишутся достаточно часто, полезно будет применять специальное форматирование для упорядочивания CSS-свойств, что делает код более читабельным, более структурированным и более понятным. Существуют различные схемы группирования, используемые разработчиками в своих проектах. Некоторые разработчики сначала описывают цвета и шрифты, другие описывают структурные элементы, позиционирование и float'ы. Элементы также сортируются в соответствии с топологией сайта и его структуры. Подобный подход можно применять и к CSS-селекторам:
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
Некоторые разработчики используют более интересный подход — они группируют свойства в алфавитном порядке. Следует заметить, что группировка по алфавиту CSS-свойств может привести к проблемам в некоторых браузерах. Обращайте внимание, чтобы в итоге подобные манипуляции не вызывали изменений.
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
Какой бы формат группирования вы не выбрали, подумайте о том, для чего это нужно и что вы хотите этим достичь. В любом случае, коллеги будут вам благодарны за ваши усилия. А вы будете благодарны им за использование вашего формата.
5. Отступы — ваши друзья!
В коротких фрагментов кода (не более 3-х атрибутов) попробуйте использовать запись в одну строку. Этим вы «подсветите» зависимость между элементами одного и того же класса. Данный подход значительно улучшает читабельность кода при поиске определенного элемента в таблице стилей.
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
Вы точно помните, что вы делали, всегда можете вернуться назад и внести необходимые исправления. А если вы сделали большое кол-во изменений и просто забыли? Chris Coyier предлагает интересное решение для подсветки изменений в CSS-коде. Просто сделайте отступ в новой или измененной строке и обозначьте ее комментарием (например @new) — вы всегда сможете по ключевому слову найти этот фрагмент и откатить изменения в случае возникновения проблем.
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
В заключении
CSS styleguide могут быть полезными только в случае правильного их использования. Если результат от использования подобных стильгайдов нулевой, лучше отказаться от их использования. Не следуют злоупотреблять стильгайдами для большого кол-ва связанных в группы элементов. Ваша цель лишь обеспечить читабельность и удобство дальнейшего обслуживания кода.
Источник: Smashing Magazine
Перевел Дмитрий Папуца
Ссылки по теме
- CSS: Best Practices
- Indent CSS Changes You Are Unsure About
- Write well-structured CSS-file
- Optimize your CSS files to improve code
- 12 articles and tools for CSS Structuring and Optimizing
- 70 Expert Ideas For Better CSS Coding
- CSS Formatting Screencast
Давно искал хорошие способы структурирования сss, но на русском никак не мог найти,но это статься самая обширная по этому поводу из которых я читал!
— GAN Sep 23, 08:13 PM #Хорошие советы, спасибо! Дополню: можно разделять внешний вид и структуру – тогда проще менять дизайн, хотя, код несколько раздувается.
— austin Sep 18, 08:27 AM #