CSS Styleguide — улучшение читабельности кода

12.05.08 верстка, css

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

В действительности разработчики подошли достаточно креативно к написанию комментариев и форматированию 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

Комментарии

Имя		Помнить
E-mail
http://
Коментарий

 

 

← предыдущая