Покращуємо читабельність CSS-коду за допомогою «стильових гідів»

У W3Cast # 3 Денис (CurlyBrace) торкнувся теми використання styleguides, а у мене якраз вже була стаття з цієї теми. Тому я вирішив поділитися нею, щоб показати наочні приклади, що демонструють можливості «стильових гідів».

«Розділяй і володарюй»
Створення змісту
Встановлення схеми кольорів та друкарні
Впорядкування властивостей CSS
Вкладеність - ваш друг!
Ув'язнення

«Стильові гіди» - це звід правил і угод, що надають розробникам інформацію про структуру коду і прийняті правила оформлення. Найчастіше використовується групою розробників, при спільній участі в проекті або ж для самодисципліни при розробці коду.

Якщо проект великий, то він обростає численними файлами CSS з різними колірними схемами, друкарнею та іншими стилевими установками. Щоб уникнути плутанини в структурі коду і не забути що так як, потрібно розробляти структурований код, який згодом буде простіше використовувати, правити і частково використовувати в інших проектах.

Найкращий спосіб організації зрозумілого коду - використання коментарів. Розробники придумали досить творчі способи використання коментарів і форматування тексту, щоб поліпшити розуміння коду. Існує безліч різних прийомів, які можуть комбінуватися виходячи з ваших переваг, але ми поки розглянемо тільки кілька з них.

«Розділяй і володарюй»

Для початку проаналізуйте структуру свого макета і виділіть найважливіші компоненти в CSS-коді. У більшості випадків корисно розсортувати за належністю до класів або CSS-селекторів. Перед початком кодингу об'єднайте елементи в групи. Наприклад, ви можете вибрати загальні стилі («тіло», параграфи, списки тощо), структуру, заголовки, текстові стилі, навігацію, форми, коментарі та окремі елементи.

Виберіть спеціальні мітки (наприклад, «зірочку» - «*» або мінус - «-») для того, щоб виділяти важливі елементи. Наприклад, ви можете вибрати заголовки окремих груп елементів. Дуже важливо, щоб мітки кидалися в очі при побіжному перегляді коду.

Однак такий підхід може виявитися не дуже ефективним для великих проектів, де головна стильова таблиця є досить великою. У такому випадку стилі можна розділити на декілька файлів, кожен з яких міститиме єдину групу. Для цього в основному файлі стилів достатньо імпортувати групові стилі. А на сторінці достатньо включати тільки основний файл.

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[Master StyleSheet]
Project: Obout.ru
Version: 1.1
Last change: 05/06/08 [fixed Float bug, Alex]
Assigned to: Alexandr (ALex), Vasy Pupkin (VP)
Primary use: OBOUT.RU
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
@import ""reset.css"";
@import ""layout.css"";
@import ""colors.css"";
@import ""typography.css"";
@import ""flash.css"";
/* @import ""debugging.css""; */
</code>

Також іншим розробникам буде корисно знати деяку додаткову технічну інформацію про проект: про те які зміни були зроблені в останній раз, коли і ким це було зроблено.

До того ж можна включати зневаджувальні діагностичні CSS стилі для пошуку не коректних елементів.

Створення змісту

Для опису структури свого коду можна зробити невеликий зміст на початку стилевого файлу. Цей прийом допоможе зробити короткий огляд структури розташування елементів з використанням ідентифікаторів (ID) і класів (class), які використовуються як окремі гілки структурного дерева сторінки. Також можна використовувати спеціальні ключові слова для більш швидкого пошуку потрібної секції в коді.

Наприклад так:

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
</code>

або ж такий варіант якого я дотримуюся:

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
</code>

Він дозволяє шукати за індексами і дає схематичне уявлення про структуру сторінки.

Є ще простіший спосіб, який не використовує вкладеності, а використовує звичайний нумерований список. Щоб знайти блок у стилевій таблиці, достатньо використовувати файловий пошук і ввести цифру або назву блоку. Такий спосіб дуже легкий, швидкий і ефективний.

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
<! -- тут багато CSS-коду -->
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
</code>

Використання змісту полегшить розуміння та читання вашого CSS-коду іншим розробникам. Його можна роздрукувати, щоб воно було постійно перед очима, коли ви читаєте код. Для роботи в команді, використання змісту стане хорошою перевагою і заощадить значну частину вашого часу і часу ваших колег.

Встановлення схеми кольорів та друкарні

Поки у нас немає можливості встановлювати в CSS константи, ми змушені шукати швидкі способи для позначення незмінних властивостей. У веб-розробці до костянт можна віднести кольори та друкарню, що використовуються в документі, які представляють собою фіксовані значення та використовуються неодноразово в документі.

Одним із способів заміни відсутності констант полягає в тому, щоб створити визначення деяких констант, які будуть використовуватися. Знову ж таки це допоможе уникнути плутанини при копіюванні з однієї властивості в іншу. Якщо ж вирішити змінити будь-яку властивість у таблиці стилів, достатньо знову ж таки скористатися інструментами пошуку і заміни вашого редактора.

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# [Color codes]
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
#
*/
</code>

Як альтернативу можна також описати коди кольорів, які використовуються у вашому макеті. Для кожного кольору ви можете встановити секції, які використовують його або навпаки, щоб встановити кольори, що використовуються.

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[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)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
</code>

Такий самий підхід можна використовувати для позначення друкарні.

<code class=""css"">
/*
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
[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
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/
</code>

Впорядкування властивостей CSS

Є ще кілька прийомів для написання більш структурованого і інтуїтивно зрозумілого CSS-коду. Існує безліч способів сортування, придуманих розробниками. Деякі розробники віддають перевагу розташуванню кольорів і шрифтів. інші віддають перевагу спочатку розміщувати більш важливі властивості, наприклад, пов'язаних з позиціонуванням елемента. Деякі елементи також часто сортують відповідно до структурного розташування або топологічної схеми. До цього підходу можна віднести угруповання селекторів тегів:

<code class=""css"">
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
</code>

Деякі розробники віддають перевагу сортуванню властивості в алфавітному порядку:

<code class=""css"">
body {
background: #fdfdfd;
color: #333;
font-size: 1em;
line-height: 1.4;
margin: 0;
padding: 0;
}
</code>

Використовуйте свій стиль форматування скрізь і ваші колеги будуть вдячні вам за вашу працю - вони теж будуть дотримуватися даного стилю форматування.

Вкладеність - ваш друг!

Використання табулювання селекторів зробить розуміння коду більш простим. Чим більш «глибокий» елемент - тим більша кількість табів ставиться перед ним. Визначте «батьківський» елемент і відокреміть «дочірні» потрібною кількістю «табів»:

<code class=""css"">
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, ""Times New Roman""; margin-bottom: 20px; }
#main-column p { color: #333; }
</code>

Є ще один цікавий підхід кікористуванню «табів» і коментарів. Іноді при внесенні змін результат виявляється не таким як ви очікували. А що якщо змін було зроблено багато і всі їх не запам'ятати? Ось тут те і може нам стати в нагоді виділення недавніх змін у вашому CSS-коді. Внесені зміни можна позначити додатковим відступом, який виділятиме властивість від інших у цьому самому селекторі. Або ж можна використовувати деякі ключові слова в коментарях. Наприклад @ new, яке можна знайти і відкотити внесені зміни назад, доки не знайдете проблему.

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

Ув'язнення

«Стильові гіди» CSS можуть бути корисні, якщо їх використовувати належним чином. Не використовуйте «стильові гіди», якщо вони не дозволяють вам отримати краще розуміння коду і кращої структурованості коду. Ваша мета - досягти кращої розумілості/удобочитаемості коду.

PS. Не забувайте, що фінальна версія (або як кажуть «продакшен») не повинна містити коментарів «стильового гіда», щоб не навантажувати користувачів передачею зайвого обсягу даних. А у розробника все-таки повинна бути повна версія і після завершення розробки.

PPS. Спасибі всім хто підняв карму, переніс у тематичний блог.

UPD.У коментарях vithar поділився своїм CSS Code Style.

Пропоную і іншим включатися і ділитися своїми напрацюваннями.

UPD. У коментарях вже профодив аналогію з phpdoc і ось натрапив на початок реалізації загального стандарту cssdoc - аналог phpdoc але вже для css. Розвиток проекту допоможе виробити більш-менш єдині стандарти при розробці css.