Skip to content

WebHeroSchool/CSS_Style_Guide

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
.gitignore
.gitignore
 
 
.stylelintrc
.stylelintrc
 
 
README.md
README.md
 
 

Repository files navigation

WebHero CSS Style Guide

В данном руководстве описаны подходы по оформлению CSS. Данное руководство не является железным правилом для всех проектов во frontend, а только рекомендации для разработки проектов в нашей школе 🙂 На вашей работе могут быть другие правила. Все правила обсуждаются и согласовываются участниками команды и придерживаются их на протяжении разработки всего проекта.

 

Содержание

  1. Отступы, 2 или 4 пробела
  2. Точка с запятой
  3. В строку или в столбик
  4. : или :: для псевдоэлементов
  5. Пустые блоки
  6. Ноль, что с ним делать
  7. Специфичность
  8. Шрифты
  9. Строчные или заглавные буквы
  10. Короткое или длинное название шестнадцатеричных цветов
  11. Пустая строка (Enter)
  12. Пробелы
  13. Дублирование
  14. Использование только известных названий/имен/свойств и тд
  15. Комментарии
  16. !important в @keyframes

 

Отступы, 2 или 4 пробела.

 

1. Всегда делай отступ в два пробела. (если ты пользуешься табом, то его можно также настроить на отступ в два пробела).

stylelint: indentation

 

❌ не надо так 👇

@media print {
a {
background-position: top left,
top right;
}
}

@media print {
a {
  background-position: top left,
    top right;
  }
}

@media print {
  a {
    background-position: top left,
    top right;
  }
}

@media print {
  a,
    b {
    background-position: top left,
      top right;
  }
}

a {
/* blergh */
  color: pink;
}
  /* blergh */

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {}

a {
  color: rgb(
  255,
  255,
  255
  );
  top: 0;
}

 

✅ надо так 👇

@media print {
 a {
   background-position: top left,
     top right;
 }
}

@media print {
 a,
 b {
   background-position: top left,
     top right;
 }
}

a {
 /* blergh */
 color: pink;
}
/* blergh */

@media print,
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 120dpi) {}

a {
 color: rgb(
   255,
   255,
   255
 );
 top: 0;
}

⬆ Вернуться к содержанию

 

Точка с запятой.

 

1. Всегда ставь точку с запятой у последнего свойства в блоке.

stylelint: declaration-block-trailing-semicolon

 

❌ не надо так 👇

a { color: pink }
a { background: orange; color: pink }
a { @include foo }

 

✅ надо так 👇

a { color: pink; }
a { background: orange; color: pink; }
a { @include foo; }

 

2. Не ставь лишние точки с запятой.

stylelint: no-extra-semicolons

 

❌ не надо так 👇

@import "x.css";;
@import "x.css";
;
a {
  color: pink;;
}

a {
  ;color: pink;
}

a {
  color: pink;
  ;
}

a {
  color: red;
}
;
b {
  color: white;
}

 

✅ надо так 👇

@import "x.css";

a {
  color: pink;
}

⬆ Вернуться к содержанию

 

В строку или в столбик.

 

1. Если свойств несколько, лучше писать их в столбик.

stylelint: declaration-block-single-line-max-declarations

 

Такая запись более удобна для восприятия.

 

❌ не надо так 👇

a { color: pink; top: 3px; }

a,
b { color: pink; top: 3px; }

 

✅ надо так 👇

b { color: pink; }

a {
  color: pink;
  top: 3px;
}

 

2. В многострочных блоках пиши каждое свойство с новой строки(в столбик).

stylelint: declaration-block-semicolon-newline-after

 

❌ не надо так 👇

a {
  color: pink; top: 0;
}

 

✅ надо так 👇

a {
  color: pink;
  top: 0;
}

 

3. Перечисляй селекторы в столбик (после запятой начинай с новой строки).

stylelint: selector-list-comma-newline-after

 

❌ не надо так 👇

a, b { color: pink; }

a
, b { color: pink; }

 

✅ надо так 👇

a,
b { color: pink; }

a
,
b { color: pink; }

⬆ Вернуться к содержанию

 

: или :: для псевдоэлементов.

 

Используй двойное двоеточие для псевдоэлементов.

stylelint: selector-pseudo-element-colon-notation

 

❌ не надо так 👇

a:before { color: pink; }
a:after { color: pink; }
a:first-letter { color: pink; }
a:first-line { color: pink; }

 

✅ надо так 👇

a::before { color: pink; }
a::after { color: pink; }
a::first-letter { color: pink; }
a::first-line { color: pink; }
input::placeholder { color: pink; }
li::marker { font-variant-numeric: tabular-nums; }

⬆ Вернуться к содержанию

 

Пустые блоки.

 

Не оставляй пустые блоки со стилями.

stylelint: block-no-empty

 

❌ не надо так 👇

a {}

a { }

@media print {
  a {}
}

 

✅ надо так 👇

a {
  /* foo */
}
@media print {
  a {
    color: pink;
  }
}

⬆ Вернуться к содержанию

 

Ноль, что с ним делать.

 

1. Не ставь ведущий ноль у дробных чисел.

stylelint: number-leading-zero

 

❌ не надо так 👇

a { line-height: 0.5; }
a { transform: translate(2px, 0.4px); }

 

✅ надо так 👇

a { line-height: .5; }
a { transform: translate(2px, .4px); }

 

2. Не ставь единицы измерения длины, если значение нулевое.

stylelint: length-zero-no-unit

 

Длина - это измерение , которое представляет собой число, за которым сразу следует идентификатор единицы измерения . Однако для нулевой длины идентификатор единицы является необязательным. Единицы длины: em, ex, ch, vw, vh, cm, mm, in, pt, pc, px, rem, vmin, и vmax.

 

❌ не надо так 👇

a { top: 0px }
a { top: 0.000em }

 

✅ надо так 👇

a { top: 0 } /* нет единицы */
a { transition-delay: 0s; } /* измерение*/
a { top: 2in; }
a { top: 1.001vh }

 

3. Не ставь нули в конце чисел, если они не несут смысла.

stylelint: number-no-trailing-zeros

 

❌ не надо так 👇

a { top: 1.0px }
a { top: 1.01000px }

 

✅ надо так 👇

a { top: 1px }
a { top: 1.01px }

⬆ Вернуться к содержанию

 

Специфичность.

 

1. Не пиши селекторы с меньшей специфичностью после селекторов с большей специфичностью.

stylelint: no-descending-specificity

 

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

 

❌ не надо так 👇

b a {}
a {}
 
a + a {}
a {}
 
b > a[foo] {}
a[foo] {}
 
a {
  & > b {}
}
b {}
 
@media print {
  #c a {}
  a {}
}

 

✅ надо так 👇

a {}
b a {}
 
a {}
a + a {}
 
 
a[foo] {}
b > a[foo] {}
 
b {}
a {
  & > b {}
}
 
a::before {}
a:hover::before {}
a {}
a:hover {}
 
@media print {
  a {}
  #c a {}
}
 
a {}
@media print {
  #baz a {}
}

 

2. Не пиши сокращенные свойства после связных свойств.

stylelint: declaration-block-no-shorthand-property-overrides

 

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

 

❌ не надо так 👇

a {
  padding-left: 10px;
  padding: 20px;
}
 
a {
  transition-property: opacity;
  transition: opacity 1s linear;
}
 
a {
  -webkit-transition-property: opacity;
  -webkit-transition: opacity 1s linear;
}
 
a {
  border-top-width: 1px;
  top: 0;
  bottom: 3px;
  border: 2px solid blue;
}

 

✅ надо так 👇

a {
  padding: 10px;
  padding-left: 20px;
}
 
a {
  transition-property: opacity;
}

a {
  transition: opacity 1s linear;
}
 
a {
  transition-property: opacity;
  -webkit-transition: opacity 1s linear;
}

⬆ Вернуться к содержанию

 

Шрифты.

 

Ставь всегда тип шрифта(serif, sans-serif, cursive, fantasy или monospace).

stylelint: font-family-no-missing-generic-family-keyword

 

Тип шрифта:

  • может стоять в любом месте в списке шрифтов;
  • может быть опущен, если используется ключевое слово, связанное с наследованием свойств или системным шрифтом.

 

❌ не надо так 👇

a { font-family: Helvetica, Arial, Verdana, Tahoma; }
a { font: 1em/1.3 Times; }

 

✅ надо так 👇

a { font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; }
a { font: 1em/1.3 Times, serif, Apple Color Emoji; }
a { font: inherit; }
a { font: caption; }

⬆ Вернуться к содержанию

 

Строчные или заглавные буквы.

 

1. Называй at-rules (правила) строчными буквами.

stylelint: at-rule-name-case

 

❌ не надо так 👇

@Charset "UTF-8";
@cHarSeT "UTF-8";
@CHARSET "UTF-8";
@Media (min-width: 50em) {}
@mEdIa (min-width: 50em) {}
@MEDIA (min-width: 50em) {}

 

✅ надо так 👇

@charset "UTF-8";
@media (min-width: 50em) {}

 

2. Называй функции строчными буквами.

stylelint: function-name-case

 

❌ не надо так 👇

a {
  width: Calc(5% - 10em);
}
a {
  width: cAlC(5% - 10em);
}
a {
  width: CALC(5% - 10em);
}
a {
  background: -WEBKIT-RADIAL-GRADIENT(red, green, blue);
}

 

✅ надо так 👇

a {
  width: calc(5% - 10em);
}
a {
  background: -webkit-radial-gradient(red, green, blue);
}

 

3. Для цветов в шестнадцетиричном формате используй строчные буквы.

stylelint: color-hex-case

 

❌ не надо так 👇

a { color: #FFF; }

 

✅ надо так 👇

a { color: #000; }
a { color: #fff; }

 

4. Для названий медиа-запрсов используй строчные буквы.

stylelint: media-feature-name-case

 

❌ не надо так 👇

@media (MIN-WIDTH: 700px) {}
@media not all and (MONOCHROME) {}
@media (min-width: 700px) and (ORIENTATION: landscape) {}
@media (WIDTH > 10em) {}

 

✅ надо так 👇

@media (min-width: 700px) {}
@media not all and (monochrome) {}
@media (min-width: 700px) and (orientation: landscape) {}
@media (width > 10em) {}

 

5. Пиши свойства строчными буквами.

stylelint: property-case

 

❌ не надо так 👇

a {
  Width: 1px
}
a {
  WIDTH: 1px
}
a {
  widtH: 1px
}
a {
  border-Radius: 5px;
}
a {
  -WEBKIT-animation-duration: 3s;
}
@media screen and (orientation: landscape) {
  WiDtH: 500px;
}

 

✅ надо так 👇

a {
  width: 1px
}
a {
  border-radius: 5px;
}
a {
  -webkit-animation-duration: 3s;
}
@media screen and (orientation: landscape) {
  width: 500px;
}

 

6. Используй строчные буквы для селекоторов псевдоклассов.

stylelint: selector-pseudo-class-case

 

❌ не надо так 👇

a:Hover {}
a:hOvEr {}
a:HOVER {}
:ROOT {}
:-MS-INPUT-PLACEHOLDER {}

 

✅ надо так 👇

a:hover {}
:root {}
:-ms-input-placeholder {}

 

7. Используй строчные буквы для селекоторов псевдоэлементов.

stylelint: selector-pseudo-element-case

 

❌ не надо так 👇

a:Before {}
a:bEfOrE {}
a:BEFORE {}
a::Before {}
a::bEfOrE {}
a::BEFORE {}
input::-MOZ-PLACEHOLDER {}

 

✅ надо так 👇

a:before {}
a::before {}
input::-moz-placeholder {}

 

8. Используй строчные буквы для типов селекторов.

stylelint: selector-type-case

 

❌ не надо так 👇

A {}
LI {}

 

✅ надо так 👇

a {}
li {}

 

9. Используй строчные буквы для единиц измерени.

stylelint: unit-case

 

❌ не надо так 👇

a {
  width: 10PX;
}
a {
  width: 10Px;
}
a {
  width: 10pX;
}
a {
  width: 10PIXEL;
}
a {
  width: calc(10PX * 2);
}

 

✅ надо так 👇

a {
  width: 10px;
}
a {
  width: calc(10px * 2);
}

⬆ Вернуться к содержанию

 

Короткое или длинное название шестнадцатеричных цветов.

 

Используй короткие обозначения шестнадцатеричных цветов.

stylelint: color-hex-length

 

❌ не надо так 👇

a { color: #ffffff; }
a { color: #ffffffaa; }

 

✅ надо так 👇

a { color: #fff; }
a { color: #fffa; }
a { color: #a4a4a4; }

⬆ Вернуться к содержанию

 

Пустая строка (Enter).

 

1. Пустая строка перед at-rules (правилами):

stylelint: at-rule-empty-line-before

 

  • всегда оставляй пустую строку.

 

❌ не надо так 👇

a {} @media {}
a {}
@media {}

 

✅ надо так 👇

a {}

@media {}

 

Исключения:

  • можно группировать свой правила по имени в блоки;

 

✅ надо так 👇

@charset "UTF-8";

@import url(x.css);
@import url(y.css);

@charset "UTF-8";

@import url(x.css); /* comment */
@import url(y.css);

a {

  @extends .foo;
  @extends .bar;

  @include loop;
  @include doo;
}

 

  • если правило вложено в блок и стоит первым, то пустую строку не оставляем;

 

❌ не надо так 👇

a {

  @extend foo;
  color: pink;
}

b {
  color: pink;
  @extend foo;
}

 

✅ надо так 👇

a {
  @extend foo;
  color: pink;
}

b {
  color: pink;

  @extend foo;
}

 

  • если правило следует за комментарием, то новую строку можно не ставить.

 

✅ надо так 👇

/* comment */
@media {}

@media {} /* comment */

 

2. Пустая строка перед комментарием:

stylelint: comment-empty-line-before

 

  • всегда оставлять пустую строку.

 

❌ не надо так 👇

a {}
/* comment */

 

✅ надо так 👇

a {}

/* comment */

a {} /* comment */

 

Исключения:

  • если комментарий вложен в блок и стоит первым в блоке, пустую строку оставлять не надо;

 

❌ не надо так 👇

a {

  /* comment */
  color: pink;
}

 

✅ надо так 👇

a {
  /* comment */
  color: pink;
}

 

  • игнорируй комментарии, которые являются командами к stylelint.

 

❌ не надо так 👇

a {
  background: pink;
  /* не команда stylelint */
  color: #eee;
}

 

✅ надо так 👇

a {
  background: pink;
  /* stylelint-disable color-no-hex */
  color: pink;
}

 

3. Пустая строка перед пользовательскими свойствами (CSS переменные):

stylelint: custom-property-empty-line-before

 

  • всегда оставляй пустую строку перед пользовательским свойствами.

 

❌ не надо так 👇

a {
  top: 10px;
  -foo: pink;
  -bar: red;
}

 

✅ надо так 👇

a {
  top: 10px;

  -foo: pink;

  -bar: red;
}

 

Исключения:

  • если пользовательские свойства следуют друг за другом, то не нужно оставлять пустую строку;

 

❌ не надо так 👇

a {

  -foo: pink;

  -bar: red;
}

a {

  -foo: pink; /* comment */

  -bar: red;
}

 

✅ надо так 👇

a {

  -foo: pink;
  -bar: red;
}

a {

  -foo: pink; /* comment */
  -bar: red;
}

 

  • перед вложенными пользовательскими свойствами, которые стоят первыми в блоке свойств не нужно оставлять пустую строку;

 

❌ не надо так 👇

a {

  -foo: pink;

  -bar: red;
}

 

✅ надо так 👇

a {
  -foo: pink;

  -bar: red;
}

 

  • не оставляй пустую строку, если свойство идет после комментария;

 

✅ надо так 👇

a {
  /* comment */
  -foo: pink;
}

 

  • данное правило игнорируется для пользовательских свойств, которые находятся внутри однострочных блоков.

 

✅ надо так 👇

a { -foo: pink; -bar: red; }

 

4. Пустая строка перед простыми свойствами:

stylelint: declaration-empty-line-before

 

  • оставляй пустую строку.

 

❌ не надо так 👇

a {
  -foo: pink;
  top: 5px;
}

a {
  bottom: 15px;
  top: 5px;
}

 

✅ надо так 👇

a {
  -foo: pink;

  top: 5px;
}

a {

  bottom: 15px;

  top: 5px;
}

 

Исключения:

  • Если простое свойство следует за другим простым свойством, пустая строка не нужна. Комментарии не влияют на правило;

 

❌ не надо так 👇

a {

  bottom: 15px;

  top: 5px;
}

a {

  bottom: 15px; /* comment */

  top: 5px;
}

 

✅ надо так 👇

a {

  bottom: 15px;
  top: 5px;
}

a {

  bottom: 15px; /* comment */
  top: 5px;
}

 

  • перед вложенными свойствами, которые идут первыми в блоке, пустая строка не требуется;

 

❌ не надо так 👇

a {

  bottom: 15px;

  top: 5px;
}

 

✅ надо так 👇

a {
  bottom: 15px;

  top: 5px;
}

 

  • если свойство идет за комментарием, пустая строка не требуется;

 

✅ надо так 👇

a {
  /* comment */
  bottom: 15px;
}

 

  • правило игнорируется для свойств, написанных в строку.

 

✅ надо так 👇

a { bottom: 15px; top: 5px; }

 

5. Пустая строка перед блоками свойств:

stylelint: rule-empty-line-before

 

  • оставляй пустую строку перед многострочными блоками.

 

❌ не надо так 👇

a {
  color: red;
}
b {
  color: blue;
}

 

✅ надо так 👇

a {
  color: red;
}

b {
  color: blue;
}

 

Исключения:

  • если блок вложен и стоит первым, то перед ним не нужно оставлять пустую строку;

 

❌ не надо так 👇

@media {

  a {}

  b {}
}

 

✅ надо так 👇

@media {
  a {}

  b {}
}

 

  • если блок стоит после комментария, то пустая строка не нужна.

 

✅ надо так 👇

/* comment */
a {}

 

6. Не оставляй пустую строку перед закрывающей фигурной скобкой.

stylelint: block-closing-brace-empty-line-before

 

❌ не надо так 👇

a {
  color: pink;

}

 

✅ надо так 👇

a {
  color: pink;
}

a { color: pink; }

 

7. Не ставь лишние смежные пустые строки в функциях, селекторах, списках значений.

stylelint: function-max-empty-lines, selector-max-empty-lines, value-list-max-empty-lines

 

❌ не надо так 👇

a {
  transform:
    translate(

      1,
      1
    );
}

a,

b {
  color: red;
}
a {
  padding:
    10px
    10px
    10px

    10px
}

 

✅ надо так 👇

a {
  transform:
    translate(
      1,
      1
    );
}
a,
b {
  color: red;
}
a {
  padding: 10px
    10px
    10px
    10px
}

 

8. Ограничь число смежных пустых строк в таблице стилей.

stylelint: max-empty-lines

 

❌ не надо так 👇

a {}



b {}
//Также относится к комментариям
/*
 Call me Ishmael.



 Some years ago - never mind how log precisely - ...
 */

 

✅ надо так 👇

a {}
b {}

a {}

b {}

 

9. После открывающей фигурной скобки в многострочных блоках начинай писать свойства с новой строки.

stylelint: block-opening-brace-newline-after

 

❌ не надо так 👇

a{color: pink;
}

 

✅ надо так 👇

a { color: pink; }

a {
color: pink; }

 

10. После точки с запятой в at-rules (правила) начинай писать с новой строки.

stylelint: at-rule-semicolon-newline-after

 

❌ не надо так 👇

@import url("x.css"); @import url("y.css");
@import url("x.css"); a {}

 

✅ надо так 👇

@import url("x.css");
@import url("y.css");

@import url("x.css"); /* end-of-line comment */
a {}

@import url("x.css");

a {}

 

11. После закрывающей фигурной скобки в блоке начинай следующую запись с новой строки.

stylelint: block-closing-brace-newline-after

 

❌ не надо так 👇

a { color: pink; }b { color: red; }
a { color: pink;
} b { color: red; }

 

✅ надо так 👇

a { color: pink; }
b { color: red; }

 

12. В многострочных функциях в скобках ставь символ новой строки после открывающей и перед закрывающей скобкой.

stylelint: function-parentheses-newline-inside

 

❌ не надо так 👇

a { transform: translate(1,
  1) }

 

✅ надо так 👇

a { transform: translate(1, 1) }

a { transform: translate( 1, 1 ) }

a {
  transform: translate(
    1, 1
  );
}

a {
  transform: translate(
    1,
    1
  );
}

 

13. В многострочных функциях после запятой начинай писать с новой строки.

stylelint: function-comma-newline-after

 

❌ не надо так 👇

a { transform: translate(1
  ,1) }

 

✅ надо так 👇

a { transform: translate(1,1) }
a { transform: translate(1 ,1) }

a {
  transform: translate(1,
    1)
}

 

14. В многострочных списках медиа-запросов всегда должен быть символ новой строки после запятых.

stylelint: media-query-list-comma-newline-after

 

❌ не надо так 👇

@media screen and (color)
, projection and (color) {}

 

✅ надо так 👇

@media screen and (color), projection and (color) {}

@media screen and (color),
projection and (color) {}

@media screen and (color)
,
projection and (color) {}

 

15. В многострочных списках значений свойства начинай писать с новой строки после запятой.

stylelint: value-list-comma-newline-after

 

❌ не надо так 👇

a { background-size: 0
    , 0; }

 

✅ надо так 👇

a { background-size: 0, 0; }
a { background-size: 0,0; }
a { background-size: 0,
      0; }

 

16. В многострочных блоках свойств закрывающая фигурная скобка должна быть на новой строке.

stylelint: block-closing-brace-newline-before

 

❌ не надо так 👇

a {
color: pink;}

 

✅ надо так 👇

a { color: pink; }
a { color: pink;
}

 

16. Если свойство многострочное, после двоеточия начинай писать с новой строки.

stylelint: declaration-colon-newline-after

 

❌ не надо так 👇

a {
  box-shadow: 0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);
}

 

✅ надо так 👇

a {
  box-shadow:
    0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);
}

a {
  color: pink;
}

 

17. Не переноси непрерывные строки без использования экранирующего символа ‘\ ’.

stylelint: string-no-newline

 

❌ не надо так 👇

a {
  content: "first
    second";
}

[title="something
is probably wrong"] {}

a {
  font-family: "Times
    New
    Roman";
}

 

✅ надо так 👇

a {
  content: "first\Asecond";
}

a {
  content: "first\\nsecond";
}

[title="nothing\
  is wrong"] {}

a {
  font-family: "Times New Roman";
}

 

18. Не оставляй пустые строки с пробелами, отступами, переносом строки.

stylelint: no-empty-source

 

Строка, содержащая только пробелы является пустой.

 

❌ не надо так 👇

\t\t
\n

 

✅ надо так 👇

a {}
/* Only comments */

 

19. Оставляй пустую строку в конце блока.

stylelint: no-missing-end-of-source-newline

 

❌ не надо так 👇

a { color: pink; }

 

✅ надо так 👇

a { color: pink; }
\n

⬆ Вернуться к содержанию

 

Пробелы.

 

1. Не ставь пробелы в конце строки.

stylelint: no-eol-whitespace

 

❌ не надо так 👇

a { color: pink; }····
a { color: pink; }···
···

/* Также это относится и к многострочным комментариям */

/* something····
 * something else */

 

✅ надо так 👇

a { color: pink; }

/* something
 * something else */

 

2. Ставь один пробел между комбинаторами.

stylelint: selector-descendant-combinator-no-non-space

 

❌ не надо так 👇

.foo  .bar {}
.foo
.bar {}

 

✅ надо так 👇

.foo .bar {}

 

3. В calc функциях ставь пробел перед и после оператора.

stylelint: function-calc-no-unspaced-operator

 

Перед оператором должен быть один пробел.

После оператора должен быть один пробел.

 

❌ не надо так 👇

a { top: calc(1px+2px); }
a { top: calc(1px+ 2px); }

 

✅ надо так 👇

a { top: calc(1px + 2px); }
a { top: calc(calc(1em * 2) / 3); }
a {
  top: calc(var(-foo) +
    var(-bar));
}
a {
  top: calc(var(-foo)
    + var(-bar));
}

 

4. Не ставь пробел перед точкой с запятой в блоках со свойствами.

stylelint: declaration-block-semicolon-space-before

 

❌ не надо так 👇

a { color: pink ; }
a { color: pink ; top: 0 ; }

 

✅ надо так 👇

a { color: pink; }
a { color: pink; top: 0; }

 

5. Не ставь пробелы после открывающей квадратной скобки и перед закрывающей квадратной скобкой в селекторах атрибутов.

stylelint: selector-attribute-brackets-space-inside

 

❌ не надо так 👇

[ target] {}
[target ] {}
[ target ] {}
[ target=_blank] {}
[target=_blank ] {}
[ target=_blank ] {}

 

✅ надо так 👇

[target] {}
[target=_blank] {}

 

6. Не ставь пробелы после и перед круглой скобкой в однострочных функциях.

stylelint: function-parentheses-space-inside

 

❌ не надо так 👇

a { transform: translate( 1, 1 ) }
a { transform: translate(1, 1 ) }

 

✅ надо так 👇

a { transform: translate(1, 1) }
a { transform: translate( 1,
  1) }
a {
  transform: translate(
    1,
    1
  )
}

 

7. Не ставь пробелы внутри круглых скобок в медиа-запросах.

stylelint: media-feature-parentheses-space-inside

 

❌ не надо так 👇

@media ( max-width: 300px ) {}
@media ( max-width: 300px) {}

 

✅ надо так 👇

@media (max-width: 300px) {}

 

8. Всегда ставь пробел после функции.

stylelint: function-whitespace-after

 

❌ не надо так 👇

a { transform: translate(1, 1)scale(3); }

 

✅ надо так 👇

a { transform: translate(1, 1) scale(3); }
a { transform: translate(1, 1)     scale(3); }
a {
  transform:
    translate(1, 1)
    scale(3);
}

/* обратите внимание на две закрывающие скобки без пробела */
a { top: calc(1 * (1 + 3)); }

/* обратите внимание на ) без пробела после закрывающей скобки*/
a { padding: calc(1 * 2px), calc(2 * 5px); }

 

9. Не ставь пробелы внутри круглых скобок в селекторах псевдоклассов.

stylelint: selector-pseudo-class-parentheses-space-inside

 

❌ не надо так 👇

input:not( [type="submit"] ) {}
input:not( [type="submit"]) {}

 

✅ надо так 👇

input:not([type="submit"]) {}

 

10. Ставь один пробел перед и после оператора диапазона в медиа-запросах.

stylelint: media-feature-range-operator-space-after, media-feature-range-operator-space-before

 

❌ не надо так 👇

@media (width>=600px) {}
@media (width>= 600px) {}

 

✅ надо так 👇

@media (width >= 600px) {}
@media (width >= 600px) {}

 

11. В блоках свойств, объявленных в одну строку, ставь пробел после точки с запятой.

stylelint: declaration-block-semicolon-space-after

 

❌ не надо так 👇

a { color: pink;top: 0; }

 

✅ надо так 👇

a { color: pink; top: 0; }

a {
  color: pink;
  top: 0;
}

 

12. При использовании !important ставь один пробел перед восклицательным знаком, но не ставь пробел после восклицательного знака.

stylelint: declaration-bang-space-after, declaration-bang-space-before

 

❌ не надо так 👇

a { color: pink!important; }
a { color: pink  ! important; }

 

✅ надо так 👇

a { color: pink !important; }

 

13. Не ставь пробел перед запятыми в функциях.

stylelint: function-comma-space-before

 

❌ не надо так 👇

a { transform: translate(1 ,1) }
a { transform: translate(1 , 1) }

 

✅ надо так 👇

a { transform: translate(1,1) }
a { transform: translate(1, 1) }

 

14. Не ставь пробел перед запятой в списке медиа-запросов.

stylelint: media-query-list-comma-space-before

 

❌ не надо так 👇

@media screen and (color) ,projection and (color) {}
@media screen and (color)
, projection and (color) {}

 

✅ надо так 👇

@media screen and (color),projection and (color) {}
@media screen and (color),
projection and (color) {}

 

15. Не ставь пробел перед запятой в списке селекторов.

stylelint: selector-list-comma-space-before

 

❌ не надо так 👇

a ,b { color: pink; }
a , b { color: pink; }

 

✅ надо так 👇

a,b { color: pink; }
a, b { color: pink; }

 

16. Не ставь пробел перед запятой при перечислении значений свойства.

stylelint: value-list-comma-space-before

 

❌ не надо так 👇

a { background-size: 0 ,0; }
a { background-size: 0 ,
      0; }

 

✅ надо так 👇

a { background-size: 0,0; }
a { background-size: 0,
      0; }

 

17. Ставь пробел после комбинатора и перед ним.

stylelint: selector-combinator-space-after, selector-combinator-space-before

 

Комбинаторы используются для объединения нескольких различных селекторов в новые и более конкретные. Существует несколько типов комбинаторов, в том числе: child ( >), смежный sibling ( +), общий sibling ( ~) и потомок (который представлен пробелом между двумя селекторами).

 

❌ не надо так 👇

a +b { color: pink; }
a>b { color: pink; }

 

✅ надо так 👇

a + b { color: pink; }
a > b { color: pink; }

 

18. Не ставь пробел перед двоеточием в свойствах.

stylelint: declaration-colon-space-before

 

❌ не надо так 👇

a { color : pink }
a { color :pink }

 

✅ надо так 👇

a { color: pink }
a { color:pink }

 

19. Не ставь пробел перед двоеточием в медиа-запросах.

stylelint: media-feature-colon-space-before

 

❌ не надо так 👇

@media (max-width :600px) {}
@media (max-width : 600px) {}

 

✅ надо так 👇

@media (max-width:600px) {}
@media (max-width: 600px) {}

 

20. Не ставь пробел после оператора и перед ним в селекторах атрибутов.

stylelint: selector-attribute-operator-space-after, selector-attribute-operator-space-before

 

❌ не надо так 👇

[target= _blank] {}
[target = _blank] {}
[target= '_blank'] {}
[target= "_blank"] {}
[target = '_blank'] {}
[target = "_blank"] {}

 

✅ надо так 👇

[target] {}
[target=_blank] {}
[target='_blank'] {}
[target="_blank"] {}
[target=_blank] {}
[target='_blank'] {}
[target="_blank"] {}

 

21. В однострочных блоках свойств ставь один пробел после открывающей фигурной скобки и перед закрывающей фигурной скобкой.

stylelint: block-opening-brace-space-after, block-closing-brace-space-before

 

❌ не надо так 👇

a { color: pink;}

 

✅ надо так 👇

a { color: pink; }
a {
color: pink;}

 

22. Ставь один пробел перед открывающей фигурной скобкой после селектора.

stylelint: block-opening-brace-space-before

 

❌ не надо так 👇

a{ color: pink; }
a
{ color: pink; }

 

✅ надо так 👇

a { color: pink; }
a {
color: pink; }

 

23. В однострочных списках значений свойств ставь один пробел после запятой.

stylelint: value-list-comma-space-after

 

❌ не надо так 👇

a { background-size: 0,0; }

 

✅ надо так 👇

a { background-size: 0, 0; }

a { background-size: 0
    , 0; }

a { background-size: 0
      ,0; }

 

24. В однострочных медиа-запросах должен быть пробел после запятой.

stylelint: media-query-list-comma-space-after

 

❌ не надо так 👇

@media screen and (color),projection and (color) {}

 

✅ надо так 👇

@media screen and (color), projection and (color) {}

@media screen and (color)
, projection and (color) {}

@media screen and (color)
,projection and (color) {}

 

25. Ставь один пробел в однострочных функциях после запятой.

stylelint: function-comma-space-after

 

❌ не надо так 👇

a { transform: translate(1,1) }

a { transform: translate(1 ,1) }

 

✅ надо так 👇

a { transform: translate(1, 1) }

a { transform: translate(1 , 1) }

a {
  transform: translate(1
    ,1)
}

 

25. Если у свойства задано несколько значений и свойства записаны в строку, всегда ставь пробел после двоеточия.

stylelint: declaration-colon-space-after

 

❌ не надо так 👇

a {
  box-shadow:0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}

 

✅ надо так 👇

a {
  box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}

a {
  box-shadow:
    0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);
}

a {
  box-shadow:0 0 0 1px #5b9dd9,
    0 0 2px 1px rgba(30, 140, 190, 0.8);
}

 

26. Всегда должен быть один пробел после имени правила в однострочных блоках.

stylelint: at-rule-name-space-after

 

❌ не надо так 👇

@charset"UTF-8";
@media(min-width: 700px) {}
@media  (min-width: 700px) {}

 

✅ надо так 👇

@charset "UTF-8";
@import url("x.css");
@media (min-width: 700px) {}

@media
(min-width: 700px) {}

@media(min-width: 700px) and
  (orientation: portrait) {}

@media
  (min-width: 700px) and
  (orientation: portrait) {}

 

27. В медиа-запросах ставь пробел после двоеточия в свойстве-условии.

stylelint: media-feature-colon-space-after

 

❌ не надо так 👇

@media (max-width:600px) {}
@media (max-width :600px) {

 

✅ надо так 👇

@media (max-width: 600px) {}
@media (max-width : 600px) {}

⬆ Вернуться к содержанию

 

Дублирование.

 

1. Не дублируй селекторы.

stylelint: no-duplicate-selectors

 

Один и тот же селектор может повторяться при следующих обстоятельствах:

  • используется в разных списках селекторов:

    • a{} ;
    • a, b {} .

  • дубликаты происходят из разных таблиц стилей;

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

 

❌ не надо так 👇

.foo, .bar, .foo {}

.foo {}
.bar {}
.foo {}

.foo .bar {}
.bar {}
.foo .bar {}

@media (min-width: 10px) {
  .foo {}
  .foo {}
}

.foo, .bar {}
.bar, .foo {}

a .foo, b + .bar {}
b+.bar, a .foo {}

a b {}
a {
  & b {}
}

 

✅ надо так 👇

.foo {}
@media (min-width: 10px) {
  .foo {}
}

.foo {
  .foo {}
}

.foo {}
.bar {}
.foo .bar {}
.bar .foo {}

a b {}
a {
  & b,
  & c {}
}

 

2. Не дублируй свойства в блоках;

stylelint: declaration-block-no-duplicate-properties

 

  • никогда не повторяй свойства.

 

❌ не надо так 👇

a { color: pink; color: orange; }
a { color: pink; background: orange; color: orange }

 

✅ надо так 👇

a { color: pink; }
a { color: pink; background: orange; }

 

Исключения:

  • можно повторять свойства с разными значениями, которые идут последовательно;

    Включение повторяющихся свойств (как запасных вариантов) полезно для поддержки свойств CSS в старых браузерах. Например, использование px единиц, когда rem единицы не поддерживаются.

 

 

❌ не надо так 👇

/* одинаковые значения */
p {
  font-size: 16px;
  font-size: 16px;
  font-weight: 400;

/* непоследовательные дубликаты */
p {
  font-size: 16px;
  font-weight: 400;
  font-size: 1rem;
}

 

✅ надо так 👇

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

 

3. В таблице стилей не дублируй правила через @import.

stylelint: no-duplicate-at-import-rules

 

❌ не надо так 👇

@import 'a.css';
@import 'a.css';

@import url("a.css");
@import url("a.css");
	
@import "a.css";
@import 'a.css';

@import "a.css";
@import 'b.css';
@import url(a.css);

 

✅ надо так 👇

@import "a.css";
@import "b.css";

@import url('a.css') projection;
@import url('a.css') tv;

 

4. Не дублируй имена шрифтов.

stylelint: font-family-no-duplicate-names

 

❌ не надо так 👇

a { font-family: 'Times', Times, serif; }
a { font: 1em "Arial", 'Arial', sans-serif; }
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont, sans-serif, sans-serif; }

 

✅ надо так 👇

a { font-family: Times, serif; }
a { font: 1em "Arial", "sans-serif", sans-serif; }
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont, sans-serif; }

⬆ Вернуться к содержанию

 

Использование только известных названий/имен/свойств и тд.

 

1. Используй известные правила.

stylelint: at-rule-no-unknown

 

❌ не надо так 👇

@unknown {}

 

✅ надо так 👇

@charset "UTF-8";

@CHARSET "UTF-8";

@media (max-width: 960px) {}

@font-feature-values Font One {
  @styleset {}
}

 

2. Используй известные имена для медиа-запросов.

stylelint: media-feature-name-no-unknown

 

❌ не надо так 👇

@media screen and (unknown) {}
@media screen and (unknown: 10px) {}
@media screen and (unknown > 10px) {}

 

✅ надо так 👇

@media all and (monochrome) {}
@media (min-width: 700px) {}
@media (MIN-WIDTH: 700px) {}
@media (min-width: 700px) and (orientation: landscape) {}
@media (-webkit-min-device-pixel-ratio: 2) {}

 

3. Используй только известные свойства, селекторы псевдоклассов и псевдоэлементов, типы селекторов.

stylelint: property-no-unknown, selector-pseudo-class-no-unknown, selector-pseudo-element-no-unknown, selector-type-no-unknown

 

Свойства, селекторы псевдоклассов и псевдоэлементов, определенные в Спецификациях CSS, и свойства, специфичные для браузера, считаются известными.

 

❌ не надо так 👇

a {
  colr: blue;
}
a:hoverr {}
a::element {}
tag {}

 

✅ надо так 👇

a {
  color: green;
}
a {
  -webkit-align-self: center;
}
a {
  align-self: center;
}
a:hover {}
a:before {}
input {}
ul li {}

 

4. Используй только известные единицы измерения, определенные в Спецификациях CSS.

stylelint: unit-no-unknown

 

❌ не надо так 👇

a {
  width: 10pixels;
}
a {
  width: calc(10px + 10pixels);
}

 

✅ надо так 👇

a {
  width: 10px;
}
a {
  width: 10Px;
}
a {
  width: 10pX;
}
a {
  width: calc(10px + 10px);
}

 

5. При использовании цветов в шестнадцатеричной форме не используй недопустимые значение.

stylelint: color-no-invalid-hex

 

Длинные шестнадцатеричные цвета могут состоять из 6 или 8 (с альфа-каналом) шестнадцатеричных символов. И их сокращенные варианты - 3 и 4 символа соответственно.

 

❌ не надо так 👇

a { color: #00; }
a { color: #fff1a; }
a { color: #12345aa; }

 

✅ надо так 👇

a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }

 

6. При использовании linear-gradient() правильно пиши первый аргумент - позиция, от которой будет начинаться градиент.

stylelint: function-linear-gradient-no-nonstandard-direction

 

Для позиции используются следующие значения:

  • угол;

  • to, а затем добавляются ключевые слова top, bottom и left, right.

 

❌ не надо так 👇

.foo { background: linear-gradient(top, #fff, #000); }

.foo { background: linear-gradient(bottom, #fff, #000); }

.foo { background: linear-gradient(45, #fff, #000); }

.foo { background: linear-gradient(to top top, #fff, #000); }

 

✅ надо так 👇

.foo { background: linear-gradient(to top, #fff, #000); }

.foo { background: linear-gradient(to bottom right, #fff, #000); }

.foo { background: linear-gradient(45deg, #fff, #000); }

.foo { background: linear-gradient(1.57rad, #fff, #000); }

/* Направление по умолчанию "to bottom" */
.foo { background: linear-gradient(#fff, #000); }

⬆ Вернуться к содержанию

 

Комментарии.

 

1. Не оставляй пустые комментарии.

stylelint: comment-no-empty

 

❌ не надо так 👇

/**/
/* */
/*

 */

 

✅ надо так 👇

/* comment */
/*
 * Multi-line Comment
**/

 

2. Не используй двойной слеш //... для комментирования.

stylelint: no-invalid-double-slash-comments

 

CSS не поддерживает комментарии двойным слешем (исключение: некоторые препроцессоры)

 

❌ не надо так 👇

a {
  //color: pink;
}
//a { color: pink; }

// Comment {}
a {
  color: pink;
}

 

✅ надо так 👇

a {
  /* color: pink; */
}
/* a { color: pink;  } */

 

3. Ставь пробелы внутри маркеров комментария.

stylelint: comment-whitespace-inside

 

❌ не надо так 👇

/*comment*/

/*comment */

/** comment**/

 

✅ надо так 👇

/* comment */

/** comment **/

/**
 * comment
 */

/*     comment
*/

⬆ Вернуться к содержанию

 

!important в @keyframes.

 

Не используй !important в объявлениях в ключевых кадрах.

stylelint: keyframe-declaration-no-important

 

Использование !important в объявлениях ключевых кадров полностью игнорируется в некоторых браузерах.

 

❌ не надо так 👇

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 100px !important;
  }
}
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 100px!important;
  }
}
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 100px ! important;
  }
}

 

✅ надо так 👇

a { color: pink !important; }
@keyframes important1 {
  from {
    margin-top: 50px;
  }
  to {
    margin-top: 100px;
  }
}

⬆ Вернуться к содержанию

 

 

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

11 stars

Watchers

4 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •