stylelint-config-crescendo v1.2.2

stylelint-config-crescendo

Stylelint rules based on crescendo scss styleguide

Installation

yarn add stylelint-config-crescendo

Usage

If you've installed stylelint-config-crescendo locally within your project, just set your stylelint config to:

sample package.json config

    "stylelint": {
        "extends": [
            "stylelint-config-crescendo"
        ]
    }

Extending config for project

Add "rules" key to your config and override as needed.

Stylelint Rules

Default rules

stylelint-config-crescendo extends both stylelint-config-recommended and stylelint-config-prettier. View the additional rules(index.js added by stylelint-config-crescendo;

Rules outline

Formatting

• Use soft tabs ( 4 spaces ) for indentation.
• Do not use ID selectors
• Each selector should be on its own line
• Put a space before the opening brace { in rule declarations
• In properties, put a space after, but not before, the : character.
• Put closing braces } of rule declarations on a new line
• Put blank lines between rule declarations

Bad

.bad {
  border: 1px solid red;
}

.please,
.do-not,
.do-this {
  // ...
}
#no-no {
  // ...
}

Good

.good {
  border: 1px solid red;
}

.please,
.one-selector,
.per-line {
  // ...
}

Ordering of property declarations

1. Variables $color-red: red;
2. @extend @extends .someclass;.
3. @include without a block. @include clearfix();
4. Declarations. border: 1px solid $color-red;
5. @include with a block. @include media($small) {font-weight: bold;}
6. @media
7. :rules
8. ::rules
9. Nested rules