ZODIOS.net

Мой Style Guide

08.10.2008  –  Рубрика: HTML&CSS

После недолгих раздумий решил написать свой стайл гайд. Что это такое и зачем это нужно? Style Guide это набор правил по которым пишутся стили. Это делается для того чтоб было легче работать со стилями в команде. Чтоб человек не сидел в поисках нужного стиля, а сразу четко понимал что и зачем. Также это нужно для того чтоб код был упорядоченный и структурированный. Приведенный ниже стайл гайд еще пока в стадии доработки.

Название классов, идентификаторов.

Название классов, идентификаторов пишутся в нотации camel. Первое слово с маленькой буквы, а все последующие с большой. Пример: .someLayerStyle.

Для  типовых элементов создаются одинаковые имена идентификаторов

1.       #header

2.       #wrapper

3.       #footer

4.       #leftBar

5.       #rightBar

6.       #centerBar

7.       #leftCol

8.       #rightCol

Структурирование кода

Таблицы стилей разделяются комментариями по разделам. Первыми глобальные стили для базовых элементов html,body,p,h*,strong,ul,li,a. Потом стили для отдельных разделов header,footer,leftBar,rightBar. Потом стили отдельных подразделов article,calendar,loginForm. И последними идут стили общие для всех подразделов – .header1,.header2,.dotLink. Разделы таблиц разделяются комментарием типа:
/*—————————————————Header——————————————————-*/

Последовательность атрибутов

1.       display

2.       position

3.       top/bottom

4.       left/right

5.       width

6.       height

7.       margin

8.       padding

9.       float

10.   border

11.   font-family

12.   font-size

13.   font-weight

14.   text-decoration

15.   list-style

16.   color

17.   background

18.   background-position

Сокращения:

Свойства стилей сокращаются максимальным образом. Например – пишется не margin-left:5px;margin-right:5px, а  margin:0 5px 0; Это же касается и font, padding, border.

Tags: CSS