5 техник по улучшению структуры Вашего CSS-кода

Автор: 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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*