1.2.2 • Published 7 years ago

stylelint-config-crescendo v1.2.2

Weekly downloads
2
License
MIT
Repository
bitbucket
Last release
7 years ago

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