Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* Default configuration to lint
* the airbnb css style-guide.
* This file is taken from a pull request to Airbnb/css repo
* which intends to create a default preset that can be used
* in the future. Until it is merged, we will have the config here.
* https://github.com/airbnb/css/pull/23
* Add more rules: http://stylelint.io/user-guide/rules/
* Also, to understand better who the rules are named:
* http://stylelint.io/user-guide/about-rules/
* For an extended sample of config, check this out
* http://stylelint.io/user-guide/example-config/
*/
export default {
plugins: [
'stylelint-scss',
'stylelint-selector-bem-pattern',
],
rules: {
/* ==========================================================================
Airbnb config
========================================================================== */
// CSS formatting
'selector-no-id': true,
indentation: 2,
'selector-list-comma-newline-after': 'always',
'declaration-colon-space-after': 'always',
'declaration-colon-space-before': 'never',
'block-opening-brace-space-before': 'always',
'declaration-block-single-line-max-declarations': 1,
'rule-nested-empty-line-before': ['always', {
ignore: ['after-comment'],
}],
'rule-non-nested-empty-line-before': ['always', {
ignore: ['after-comment'],
}],
// Comments
'comment-empty-line-before': ['always', {
ignore: ['stylelint-commands'],
}],
// Bem
'plugin/selector-bem-pattern': {
componentName: '[A-Z]+',
componentSelectors: {
initial: '^\\.{componentName}(?:-[a-z]+)?$',
combined: '^\\.combined-{componentName}-[a-z]+$',
},
utilitySelectors: '^\\.util-[a-z]+$',
},
// Border
'declaration-property-value-blacklist': {
'/^border/': ['none'],
},
// SASS
// All @includes after properties
// Nested selectors after properties
// Variables dash-dashed
// This regexp matches:
// $button-text-background-color--hover-hola
// regex under construction
// 'scss/dollar-variable-pattern': '\b[a-z]+(?:-)+(\b[a-z]+(?:-))*',
// forbid extend
'at-rule-blacklist': ['extend'],
// Nesting depth
'max-nesting-depth': 3,
/* ==========================================================================
Best practices
========================================================================== */
// Specificity
// To learn more about this:
// http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/
// "id,class,type",
// selector-max-specificity
'declaration-no-important': true,
'selector-max-compound-selectors': 3,
'selector-no-qualifying-type': true,
// Selectors
'no-duplicate-selectors': true,
// Blocks
'block-no-empty': true,
'at-rule-empty-line-before': [
'always', {
// Allow mixins to have an empty line before
ignoreAtRules: ['import', 'first-nested'],
}],
// More styling rules for more consistency
'at-rule-name-case': 'lower',
// Colors
'color-hex-case': 'lower',
'color-hex-length': 'long',
'color-no-invalid-hex': true,
'no-indistinguishable-colors': true,
// strings
'string-quotes': 'single',
// Values
// Disallow vendor prefix, they are added by autoprefixer
'value-no-vendor-prefix': true,
'value-list-comma-space-after': 'always-single-line',
// Disallows margin: 1px 1px 1px 1px;
'shorthand-property-no-redundant-values': true,
// Comments
'comment-whitespace-inside': 'always',
// Functions
'function-comma-space-after': 'always-single-line',
'function-comma-space-before': 'never',
// Numbers
// unitless zero and no trailing zeros
'length-zero-no-unit': true,
'number-no-trailing-zeros': true,
// Syntax
'declaration-block-trailing-semicolon': 'always',
// Declaration blocks
'declaration-block-no-duplicate-properties': true,
// More on this one here:
// http://stylelint.io/user-guide/rules/declaration-block-no-ignored-properties/
'declaration-block-no-ignored-properties': true,
// Require a reason before or after a stylelint disable
'stylelint-disable-reason': 'always-after',
// Prevents adding unnecesary Specificity or complicated sass stuff
'scss/selector-no-redundant-nesting-selector': true,
},
};
@nerdyman

This comment has been minimized.

Copy link

commented Dec 20, 2017

Stylelint 8 doesn't support some of these rules, here's the replacements.

// 'selector-no-id': true,
'selector-max-id': 0,

//'rule-non-nested-empty-line-before': ['always', {
//    ignore: ['after-comment'],
//}],
// depreacted: https://github.com/alienlebarge/stylelint-config/issues/19
@adoji92

This comment has been minimized.

Copy link

commented May 2, 2018

I think style-config-standard is the solution

it says:

Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.