Look into a config file for using http://stylelint.io/

[andykenward]

Would be great to have a shared config file for stylelint.io with these rules.

It is written in JavaScript vs scss-lint that relies on Ruby.

Article about it

[gaurav21r]

+1 :+1:

[timothyneiljohnson]

+1 👍

[ljharb]

@timothyneiljohnson Now that Github has reactions, please use those to +1 in the future instead of adding comment noise. Thanks!

[ntwb]

From the README.md

1. CSS
   • Formatting
     • Use soft tabs (2 spaces) for indentation: 'indentation': 2,
     • Do not use ID selectors: 'selector-no-id': true,
     • When using multiple selectors in a rule declaration, give each selector its own line: 'selector-list-comma-newline-after': 'always',
     • Put a space before the opening brace { in rule declarations: 'block-opening-brace-space-before': 'always',
     • In properties, put a space after, but not before, the : character: 'declaration-colon-space-after': 'always', and 'declaration-colon-space-before': 'never',
     • Put closing braces } of rule declarations on a new line: 'block-closing-brace-newline-before': 'always',
     • Put blank lines between rule declarations: 'rule-non-nested-empty-line-before': ['always', { ignore: ['after-comment'], }],
   • Comments
     • Prefer line comments (// in Sass-land) to block comments.
     • CSS: 'no-invalid-double-slash-comments': true, Ignored in Sass-land
     • Prefer comments on their own line. Avoid end-of-line comments: 'comment-empty-line-before': ['always', {ignore: ['stylelint-commands'],}],
     • Write detailed comments for code that isn't self-documenting:
     • Uses of z-index: n/a
     • Compatibility or browser-specific hacks: you might want to use no-browser-hacks rule with the warning severity
   • OOCSS and BEM
     • Include the stylelint plugin stylelint-selector-bem-pattern see https://github.com/davidtheclark/stylelint-selector-bem-pattern and https://github.com/postcss/postcss-bem-linter
   • Border
     • Use 0 instead of none to specify that a style has no border: Implemented using stylelint plugin stylelint-value-border-zero with "value-border-zero": { "convention": "0" // Or "none" }, see https://github.com/timothyneiljohnson/stylelint-value-border-zero
2. Sass
   • Ordering
     • Use declaration-block-properties-order though a new option would be neded for the rule to make @includes last in the list http://stylelint.io/user-guide/rules/declaration-block-properties-order/
   • Variables
     • Use stylelint plugin stylelint-scss and a regex with the dollar-variable-pattern rule
   • Extend directive
     • Maybe a new stylelint-scss rule, at-extend-disallow https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-extend-no-missing-placeholder/README.md
   • Nested selectors
     • Do not nest selectors more than three levels deep: 'max-nesting-depth': 3,
3. Not Implemented for CSS formatting:
   • Prefer dashes over camelCasing in class names. Underscores and PascalCasing are okay if you are using BEM (see OOCSS and BEM below), use selector-class-pattern with a regular expression matching your pattern
4. Suggestions, I've deliberately left out many rules and only covered as much as I could the Airbnb CSS / Sass Styleguide as it is written, I'd suggest reviewing these for additional rules:
   • https://github.com/kristerkari/stylelint-scss
   • https://github.com/stylelint/stylelint-config-standard (Many or most of the default configuration in this config would suit Airbnb, but its hard to determine without knowing or testing with Airbnb's CSS)

[ai]

@lencioni Stylelint is already used by:

• Facebook: good overview article about their experience
• GitHub: stylelint-config-primer
• Wikipedia: stylelint-config-wikimedia
• WordPress: stylelint-config-wordpress

Using Stylelint is especially reasonable, because Stylelint copy ESLint architecture. If you like ESLint, you will love Stylelint too — same benefits.

[michaelBenin]

Hello, there hasn't been much action in this thread and I'm hoping to revive it. Is airbnb open to a pr for this?

[ai]

Stylelint become the most popular CSS linter from npm: http://www.npmtrends.com/csslint-vs-csscomb-vs-stylelint

[ljharb]

@michaelBenin yes, as long as it includes the right travis config so that it can be automatically verified :-)

[ntwb]

@michaelBenin The pull request is in #23, I'm happy to refresh it, update, add whatever Travis CI configuration is needed etc

[andykenward]

Going to close this as its been a few years.