CSS Шаблоны

Популярная в последнее время тема CSS шаблонов. Уж если вставать на рельсы автоматизации процесса веб-разработки, то автоматизировать все и вся. В том числе и CSS.

Если уж заговорили про «рельсы», то первым пусть будет претендент написанный на Ruby: LESS. Шаблонизатор использует синтаксис CSS, расширяя его вложенностью и переменными:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
 
@a_border: 1px;
 
#header {
  border-top: @a_border;
  border-left: @a_border + 1;
  border-right: @a_border + 3;
  border-bottom: @a_border * 5;
}

Что получится, я думаю объяснять не нужно, все абсолютно прозрачно. Смущает несколько название. С учетом того что разработчики предлагают компилятор для коммандной строки, можно и с коммандой (less) перепутать. Еще один странный момент – включение классов:

1
2
3
4
5
6
7
8
9
10
11
12
13

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}
 
#footer {
  .rounded_corners;
}

По данному коду будет сгенерировано следующие:

1
2
3
4
5
6
7
8
9
10
11

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Что выглядит странно. Ну хорошо – включили код класса, но почему класс-то из результатов пропал? Странно.

CleverCSS написан на Python что не может не радовать, но разработчики решили принести синтаксис Python в CSS – что настораживает. Одно дело когда ты работаешь с расширенным синтаксисом CSS, и совсем уже другое, когда надо изучать/применять некий чужеродный синтаксис:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul#comments, ol#comments:
  margin: 0
  padding: 0
 
  li:
    padding: 0.4em
    margin: 0.8em 0 0.8em
 
    h3:
      font-size: 1.2em
    p:
      padding: 0.3em
    p.meta:
      text-align: right
      color: #ddd

Данный код будет соответствовать CSS-коду:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ul#comments,
ol#comments {
  margin: 0;
  padding: 0;
}
 
ul#comments li,
ol#comments li {
  padding: 0.4em;
  margin: 0.8em 0 0.8em;
}
 
ul#comments li h3,
ol#comments li h3 {
  font-size: 1.2em;
}
 
ul#comments li p,
ol#comments li p {
  padding: 0.3em;
}
 
ul#comments li p.meta,
ol#comments li p.meta {
  text-align: right;
  color: #dddddd;
}

Возможности схожи с тем что умеет LESS: вложенность, переменные и операции. Вложенность можно применять и к наборам атрибутов:

1
2
3
4
5

#main p:
  font->
    family: Verdana, sans-serif
    size: 1.1em
    style: italic

При вычислении может приводить величины. Например, складывать cm и mm. Все это приятно, но на мой взгляд ценность представляет только вложенность и переменные/вычислений. Остальное уже не очень обязательно.

С одной стороны CSS-шаблоны это здорово. Но если посмотреть на цикл разработки, верстка выполняется на момент когда еще нет никаких систем (cms/шаблонных движков). А использовать верстальщику компилятор CSS, по-моему, будет 5-м колесом в телеге. Переводить после верстальщика CSS в CSS-шаблон, для использования в системе, то же мало оправдано.

Поскольку я никогда не применял CSS-Шаблоны в своей практике, может кто-нибудь прокомментировать полезность подобных механизмов?