A style guide which helps you write better, performant, structured, scalable and maintainable CSS.

• CSS
  • Color
  • Font
  • Number
  • String
  • Length
  • Time
  • Unit
  • Value
  • Value list
  • Shorthand property
  • Property
  • Keyframe declaration
  • Declaration
  • Selector list
  • Rule
  • Media query list
  • Comment

Color must be written in lowercase.

Bad

body {
  color: #FFF;
}

Good

body {
  color: #fff;
}

Stylelint: color-hex-case

Color must be witten with shorthand notation.

Bad

body {
  color: #ffffff;
}

Good

body {
  color: #fff;
}

Stylelint: color-hex-length

Color names must be avoided.

Bad

body {
  color: white;
}

Good

body {
  color: #fff;
}

Stylelint: color-named

Quotes are required around font-family names when they are not valid CSS identifiers.

Bad

body {
  font-family: Open Sans;
}

Good

body {
  font-family: 'Open Sans';
}

Stylelint: font-family-name-quotes

Font-weight notation must be written in numeric value.

Bad

body {
  font-weight: bold;
}

Good

body {
  font-weight: 700;
}

Stylelint: font-weight-notation

Fractal number must always have a leading zero.

Bad

body {
  font-size: .875rem;
}

Good

body {
  font-size: 0.875rem;
}

Stylelint: number-leading-zero

Number decimal precision must be limited to three.

Bad

.column {
  width: 66.6667%;
}

Good

.column {
  width: 66.667%;
}

Stylelint: number-max-precision

Number must not have a trailing zero.

Bad

.body {
  font-size: 1.0rem;
}

Good

.body {
  font-size: 1rem;
}

Stylelint: number-no-trailing-zeros

Strings must always be wrapped with single quotes.

Bad

.body {
  font-family: "Open Sans";
}

Good

.body {
  font-family: 'Open Sans';
}

Stylelint: string-quotes

Number with zero length must not have units.

Bad

body {
  margin: 0px;
}

Good

body {
  margin: 0;
}

Stylelint: length-zero-no-unit

Mininum number of milliseconds for time values must be at least 100.

Bad

a {
  transition: color 80ms;
}

Good

a {
  transition: color 100ms;
}

Stylelint: time-min-milliseconds

Unit value must be written in lowercase.

Bad

body {
  margin: 10PX;
}

Good

body {
  margin: 10px;
}

Stylelint: unit-case

Keyword values must be written in lowercase.

Bad

body {
  display: FLEX;
}

Good

body {
  display: flex;
}

Stylelint: value-keyword-case

Vender prefixes must not be used. Use Autoprefixer to add them depending on browser support.

Bad

body {
  display: -ms-flexbox;
  display: flex;
}

Good

body {
  display: flex;
}

Stylelint: value-no-vendor-prefix

Values must never have space before commans and must always have space after comma.

Bad

body {
  background-size: 50% ,50%;
}

Good

body {
  background-size: 50%, 50%;
}

Stylelint: value-list-comma-space-after, value-list-comma-space-before

Bad

Values must always be written in single line.

body {
  background-size: 50%,
                   50%;
}

Good

body {
  background-size: 50%, 50%;
}

Stylelint: value-list-comma-newline-after, value-list-comma-newline-before, value-list-max-empty-lines

Redundant property values must be written in shorthand notation.

.selector {
  margin: 1em 1em 1em 1em;
}

Good

.selector {
  margin: 1em;
}

Stylelint: shorthand-property-no-redundant-values

Property must be written in lowercase.

Bad

body {
  Margin: 0;
}

Good

body {
  margin: 0;
}

Stylelint: property-case

Vender prefixes must not be used in property name. Use Autoprefixer to add them depending on browser support.

Bad

body {
  -webkit-transform: scale(1);
}

Good

body {
  transform: scale(1);
}

Stylelint: property-no-vendor-prefix

Keyframe declaration must not have !important.

Bad

@keyframes animation {

  100% {
    opacity: 1 !important;
  }

}

Good

@keyframes animation {

  100% {
    opacity: 1;
  }

}

Stylelint: keyframe-declaration-no-important

Declaration value must have single space before !important keyword. It is recommended not using !important at all.

Bad

.selector {
  color: #000! important;
}

Good

.selector {
  color: #000 !important;
}

Best

.selector {
  color: #000;
}

Stylelint: declaration-bang-space-after, declaration-bang-space-before, declaration-no-important

Declaration requires no space before colon and single space after them.

Bad

.selector {
  color :#000;
}

Good

.selector {
  color: #000;
}

Stylelint: declaration-colon-space-after, declaration-colon-space-before

Declarations must not have empty lines between them.

Bad

.selector {
  background-color: #fff;

  color :#000;
}

Good

.selector {
  background-color: #fff;
  color: #000;
}

Stylelint: declaration-empty-line-before

Each selector of a selector list must be on it's own line.

Bad

html ,body {
  color: #000;
}

Good

html,
body {
  color: #000;
}

Stylelint: selector-list-comma-newline-after, selector-list-comma-newline-before, selector-list-comma-space-after, selector-list-comma-space-before

Rules must be separated by empty line.

Bad

a {
  …
}
b {
  …
}

Good

a {
  …
}

b {
  …
}

Stylelint: rule-empty-line-before

Media query list must be single line with space required after comma.

Bad

@media only print ,
       screen and (min-width: 48em) {
  …
}

Good

@media only print, screen and (min-width: 48em) {
  …
}

Stylelint: media-query-list-comma-newline-after, media-query-list-comma-newline-before, media-query-list-comma-space-after, media-query-list-comma-space-before

Comments must always have a newline before them. There must always be whitespace inside comment markers.

Bad

.selector { … }
/*Comment*/

Good

.selector { … }

/* Comment */

Stylelint: comment-empty-line-before, comment-whitespace-inside