border: 1px solid #ccc;

Close

color-hex-length

Specify short or long notation for hex colors.

<!-- prettier-ignore -->

a { color: #fff }
/**        ↑
 * This hex color */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

media-feature-parentheses-space-inside

Require a single space or disallow whitespace on the inside of the parentheses within media features.

<!-- prettier-ignore -->

@media ( max-width: 300px ) {}
/**    ↑                  ↑
 * The space inside these two parentheses */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

.text-center { text-align: center; }

Close

rule-empty-line-before

Require or disallow an empty line before rules.

<!-- prettier-ignore -->

a {}
      /* ← */
b {}  /* ↑ */
/**      ↑
 * This line */

This rule ignores rules that are the very first node in a source.

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule. We recommend to enable [indentation](../indentation/README.md) rule for better autofixing results with this rule.

code,

Close

rule-empty-line-before

Require or disallow an empty line before rules.

<!-- prettier-ignore -->

a {}
      /* ← */
b {}  /* ↑ */
/**      ↑
 * This line */

This rule ignores rules that are the very first node in a source.

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule. We recommend to enable [indentation](../indentation/README.md) rule for better autofixing results with this rule.

img { max-width: 100%; }

Close

rule-empty-line-before

Require or disallow an empty line before rules.

<!-- prettier-ignore -->

a {}
      /* ← */
b {}  /* ↑ */
/**      ↑
 * This line */

This rule ignores rules that are the very first node in a source.

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule. We recommend to enable [indentation](../indentation/README.md) rule for better autofixing results with this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

block-closing-brace-newline-after

Require a newline or disallow whitespace after the closing brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
a { color: red; }↑
/**              ↑
 * The newline after this brace */

This rule allows an end-of-line comment separated from the closing brace by spaces, as long as the comment contains no newlines. For example,

<!-- prettier-ignore -->

a {
  color: pink;
} /* end-of-line comment */

This rule allows a trailing semicolon after the closing brace of a block. For example,

<!-- prettier-ignore -->

:root {
  --toolbar-theme: {
    background-color: hsl(120, 70%, 95%);
  };
/* ↑
 * This semicolon */
}

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

Close

selector-list-comma-newline-after

Require a newline or disallow whitespace after the commas of selector lists.

<!-- prettier-ignore -->

a,
   b↑{ color: pink; }
/** ↑
 * The newline after this comma */

End-of-line comments are allowed one space after the comma.

<!-- prettier-ignore -->

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

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

Close

block-closing-brace-space-before

Require a single space or disallow whitespace before the closing brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/**              ↑
 * The space before this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

block-closing-brace-space-before

Require a single space or disallow whitespace before the closing brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/**              ↑
 * The space before this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

block-opening-brace-space-before

Require a single space or disallow whitespace before the opening brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/** ↑
 * The space before this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

        0 2px 1px -2px rgba(0,0,0,.2),

Close

function-comma-space-after

Require a single space or disallow whitespace after the commas of functions.

<!-- prettier-ignore -->

a { transform: translate(1, 1) }
/**                       ↑
 * The space after this comma */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

        0 1px 3px 0 rgba(0,0,0,.12);

Close

number-leading-zero

Require or disallow a leading zero for fractional numbers less than 1.

<!-- prettier-ignore -->

a { line-height: 0.5; }
/**              ↑
 * This leading zero */

This rule ignores mixin parameters in Less.

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

Close

block-closing-brace-newline-after

Require a newline or disallow whitespace after the closing brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
a { color: red; }↑
/**              ↑
 * The newline after this brace */

This rule allows an end-of-line comment separated from the closing brace by spaces, as long as the comment contains no newlines. For example,

<!-- prettier-ignore -->

a {
  color: pink;
} /* end-of-line comment */

This rule allows a trailing semicolon after the closing brace of a block. For example,

<!-- prettier-ignore -->

:root {
  --toolbar-theme: {
    background-color: hsl(120, 70%, 95%);
  };
/* ↑
 * This semicolon */
}

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}

Close

block-opening-brace-space-before

Require a single space or disallow whitespace before the opening brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/** ↑
 * The space before this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

block-closing-brace-space-before

Require a single space or disallow whitespace before the closing brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/**              ↑
 * The space before this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

    color: #222;

Close

color-hex-length

Specify short or long notation for hex colors.

<!-- prettier-ignore -->

a { color: #fff }
/**        ↑
 * This hex color */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

.github-corner svg{position: absolute; top: 0; border: 0; right: 0;

Close

block-opening-brace-newline-after

Require a newline after the opening brace of blocks.

<!-- prettier-ignore -->

a {
    ↑ color: pink; }
/** ↑
 * The newline after this brace */

This rule allows an end-of-line comment followed by a newline. For example,

<!-- prettier-ignore -->

a { /* end-of-line comment */
  color: pink;
}

Refer to [combining rules](../../../docs/user-guide/rules/combine.md) for more information on using this rule with [block-opening-brace-newline-before](../block-opening-brace-newline-before/README.md) to disallow single-line rules.

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

    background: #ddd;

Close

color-hex-length

Specify short or long notation for hex colors.

<!-- prettier-ignore -->

a { color: #fff }
/**        ↑
 * This hex color */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}

Close

block-opening-brace-space-after

Require a single space or disallow whitespace after the opening brace of blocks.

<!-- prettier-ignore -->

a { color: pink; }
/** ↑
 * The space after this brace */

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.

.github-corner svg{position: absolute; top: 0; border: 0; right: 0;

Close

declaration-block-semicolon-newline-after

Require a newline or disallow whitespace after the semicolons of declaration blocks.

<!-- prettier-ignore -->

a {
  color: pink;
  top: 0;    ↑
}            ↑
/**          ↑
 * The newline after this semicolon */

This rule ignores:

• semicolons that are preceded by Less mixins
• the last semicolon of declaration blocks

Use the block-closing-brace-*-before rules to control the whitespace between the last semicolon and the closing brace instead.

This rule allows an end-of-line comment followed by a newline. For example,

<!-- prettier-ignore -->

a {
  color: pink; /* end-of-line comment */
  top: 0;
}

The [fix option](../../../docs/user-guide/usage/options.md#fix) can automatically fix all of the problems reported by this rule.