visionappscz / standardcss Goto Github PK

@adamkudrna after your talk in Prague, I tried to implement it in our project https://app.becontentking.com and also did some comparison with this article http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/

I think that rules can be more strict. I'll write you down my list of additional rules which works also for us:

• "max-empty-lines": 3 - sometimes I need to have more empty lines in my comments of SCSS. It will improve readability. But maximum 3 empty lines is enough
• "selector-list-comma-space-before": "never", "declaration-block-no-duplicate-properties": [true, {"ignore": ["consecutive-duplicates"]}] - prevent duplicates in SCSS
• "block-no-empty": true - disallow empty blocks in SCSS
• "color-no-invalid-hex": true - disallow invalid hex color
• "declaration-colon-space-before": "never" - require a single space or disallow whitespace before the colon of declarations
• "media-feature-colon-space-after": "always", "media-feature-colon-space-before": "never", "media-feature-name-no-vendor-prefix": true - add stylelint rules for media queries
• "number-leading-zero": "never" - disallow a leading zero for fractional numbers less than 1
• "number-no-trailing-zeros": true - disallow trailing zeros in numbers
• "property-no-vendor-prefix": true, "value-no-vendor-prefix": true - disallow vendor prefixes in SCSS. This job is done usually by autoprefixer.

In README.md you have written that you write urls without quoters. I totally agree with this rule. But if you check .stylelintrc there is written rule "function-url-quotes": "always",. And this mean that you have to write quotes when defining URLs.

If you change it to "function-url-quotes": "never",, everything will be fixed again.

I have this CSS property:

box-shadow: rgba(#000, .15) 0 1px 3px 0,
	rgba(#000, .05) 0 0 0 1px,
	rgba(#3DB6F2, .6) 0 0 0 1px;

With stylelint rule "value-list-comma-space-after": "always", I have to rewrite it to:

box-shadow: rgba(#000, .15) 0 1px 3px 0, rgba(#000, .05) 0 0 0 1px, rgba(#3DB6F2, .6) 0 0 0 1px;

From my point of view this will make box-shadow property really long on one line. What will be better is to allow both: writing everything on one line or on multiline. And always keep rule that we need to have space after comma. Changing stylelint rule value-list-comma-space-after to this "value-list-comma-space-after": "always-single-line", will do this magic 🌹