Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

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

На данный момент придуманы реально удобные и простые способы сделать свой код понятным. В этой статье я ознакомлю Вас с 5 техниками улучшения структуры Вашего CSS-кода.

Перед тем, как приступить, мне бы очень хотелось, чтобы Вы обратили внимание на следующие статьи:

Техника 1. Разделяйте свой код

Сперва определите структуру Вашего макета и выделите наиболее важные модули в CSS-коде. В большинстве случаев принято выбирать порядок CSS-селекторов согласно порядку дивов и классов. Например, Вы можете выбрать глобальные стили (body, абзацы, списки и т.д.), заголовки, текстовые стили, навигацию, формы, комментарии и т.д.

Примером применения данной техники служит пример ниже:

/*-----------------------------------------
[Master Stylesheet]
Project: StudioForYou
Version:	1.1
Last change:	08/08/08 [fixed Float bug, wp]
Assigned to:	WebProffy (wp)
Primary use:	Company
-----------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

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

Техника 2. Создайте оглавление

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

На примерах ниже Вы можете увидеть данную технику в действии:

/*-----------------------------------------
[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
-----------------------------------------*/

Другим решением является создание оглавления в виде простого нумерованного списка:

/*-----------------------------------------
[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. Описание используемых цветов и шрифтов

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

/*-----------------------------------------
# [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;
Headers:		2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode";
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-свойств. Одни веб-мастера предпочитают сперва указывать цвета и шрифты, другие — «наиболее важные» свойства, как позиционирование.

    body,
	h1, h2, h3,
	p, ul, li,
	form {
		border: 0;
		margin: 0;
		padding: 0;
	}

Некоторые веб-мастера поступают еще оригинальнее — они группируют свойства в алфавитном порядке:

body {
	background: #fdfdfd;
	color: #333;
	font-size: 1em;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

Техника 5. Использование отступов

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

#main-column { display: inline; float: left; width: 30em; }
		#main-column h1 { font-family: serif; margin-bottom: 20px; }
		#main-column p { color: #333; }

К приведенному выше примеру можно добавить комментарии:

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* @new */
     margin: 3px 0 3px 0;
          padding: 3px; /* @new */
}

Дополнительные полезные ресурсы и материалы

Оригинал статьи: Improving Code Readability With CSS Styleguides



Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: