Code Style

Основы

Вайтспейсы

Во-первых, мы используем минималистичный стиль написания Стайлуса, из излишеств используем двоеточие между свойством и значением (с последующим пробелом):

.foo
  width: 10px

Отступы — два пробела, никаких табов (четыре пробела — уже слишком много, в языках, основанных на индентах, два — самое то).

Селекторы

Множественные селекторы нужно писать каждый на новой строке, через запятую (хотя Стайлус разрешает писать их без запятой, это может выстрелить в ногу в самый неожиданный момент):

.foo,
.bar
  width: 10px

Комбинаторы пишутся с пробелом вокруг, на одной строке:

.foo + .bar
  width: 10px

Если указывается имя элемента, то оно пишется в верхнем регистре:

TEXTAREA.foo
  width: 10px

Порядок свойств

Порядок свойств используем примерно такой, главное — группируем однотипные свойства.

URL

Внутри url() используем двойные кавычки:

.foo
  background: url("some-path-to-pic.png")

Это нужно для того, чтобы не пасть жертвой гибкого синтаксиса Стайлуса, который, если вы создадите переменную png = "lol", подставит её значение в подобном случае (т.е. Стайлус содержимое урла без кавычек будет воспринимать как обычный аргумент, в котором могут использоваться переменные).

Значения

1. Десятичные значения записываются с нулём в начале, например, 0.5em

2. Цвета записываются как можно короче, апперкейсом:

   • #FAFAFA, а не #fafafa.
   • #FFF, а не #FFFFFF.

3. Везде, где можно, после запятой ставится пробел. Исключение: набор компонент цвета в rgba — rgba(210,0,3, 0.4).

4. rgba желательно записывать в понимаемой Стайлусом нотации rgba(#FFF, 0.5) — это гораздо лучше читается и если используется сложный цвет, его будет проще «воссоздать» в графическом редакторе, скопировав hex-значение.

5. Если в значениях используются и вычисления, и множественные значения, для лучшей читаемости нужно оборачивать вычисления в скобки:

    padding: ($xs - 0.1*rem) ($m - 0.2*rem) ($xs - 0.1*rem) ($xs - 0.1*rem)
   

Переменные

Все переменные стайлуса нужно именовать используя символ бакса — $foo, это и читабельнее и позволит избежать конфликтов с различными другими сущностями.

Вложенность

Вложенность через амперсанд используем с опаской, только если это действительно нужно. Это обусловлено плохой читаемостью и поиском каскадных конструкций.

Пишем так:

.foo
  width: 10px

.foo:hover
  background: red

.foo-bar
  height: 10px

Исключения два:

1. Если вы делаете какой-то глобальный модификатор вроде .page_minified, то такой каскад нужно использовать чтобы случайно не применить свойства в общем скоупе, без модификатора.

2. Если вы планируете расширять (@extends .foo) соответствующую группу свойств, в этом случае из-за особенностей работы экстендов в Стайлусе придётся использовать вложенность.

При использовании вложенности амперсанд надо указывать всегда, примерно так:

.foo
  color: blue

  &:hover
    color: red

  & .bar
    background: lime

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

Если в файле находится много всяких смысловых блоков, необходимо их группировать и снабжать описательными комментариями. При этом, друг от друга блоки отделяются двумя переносами строки для большей читаемости:

// Some block doing cool stuff
.foo
  width: 10px

.foo__element
  height: 10px


// Another strange block
.strange-foo
  position: sticky
  right: 100px

.strange-foo_dope
  left: 10px

Во вложенных конструкциях (будь то условия Стайлуса, или вложенные блоки правил) необходимо по возможности класть их в конец блока правил, после стилей применяемых к исходному селектору, при этом их нужно отбивать пустой строкой:

.foo
  color: red
  background: lime

  if $whatever == true
    display: none
  else
    display: block

  &:before
    content: ''

nib

Для разворачивания префсов используем nib, поэтому пишем CSS3-свойства без префиксов:

.fpp
  border-radius: 10px
  transition: transform 1s, width .4s linear

а Ниб уже сам развернёт всё, что нужно:

.foo { -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: -webkit-transform 1s, width 0.4s linear; -moz-transition: -moz-transform 1s, width 0.4s linear; -o-transition: -o-transform 1s, width 0.4s linear; -ms-transition: -ms-transform 1s, width 0.4s linear; transition: transform 1s, width 0.4s linear; }

if ie

Мы используем отдельную таблицу стилей для ie, которую собираем, используя оригинальную таблицу стилей, пропущенную с установленной переменной Стайлуса ie = true. С помощью этого можно и нужно писать условия для ie прямо в основных таблицах стилей.

.foo
  width: 10px
  width: 12px if ie

if ie
  .foo-ololo
    height: 12px

Таким образом можно как переопределять те или иные свойства (можно заметить, что при использовании в одном блоке правил достаточно использовать условие только во второй раз — для большинства свойств CSSO уберёт лишние стили сам), так и доопределять целые селекторы, используя условие блочно.

Кроме того, можно использовать отрицание if !ie — в таком случае можно будет задавать стили, которые не попадут в конечную таблицу стилей для ie. Это может быть полезно или для того, чтобы гарантированно не включать где-то неотключаемый hasLayout, или же просто для оптимизации: раз ie не поддерживает псевдоэлементы, то можно их обрамлять в условия так, что в таблице стилей для ie не будет этих, лишних для него, стилей:

.foo
  width: 10px

if !ie
  .foo:before
    content: 'ololo'

if-ie.styl

В if-ie.styl есть гораздо больше всяких полезных вещей, рекомендуется изучить его ридми.

Скажем, свойство zoom можно не обрамлять в if ie — это делается автоматически, аналогично большинство CSS3-свойств в таблице стилей для IE не попадут.

БЭМ-нотация

См. страницу про именование классов.