Allow "section specific exceptions" to CSSLint rules within one CSS file

[Ari Palo]

Background: I'm the only front-end developer in my team, but of course not the only one writing front-end code :) Currently I have Grunt.js tasks that compile & lint CoffeeScript->JS and SCSS->CSS. I have pretty "strict" settings on both and if certain rules aren't met Grunt throws an error, which is nice so that I can make sure the whole team writes front-end code the certain way and within certain rules.

We have multiple scss files which will be compiled down to two css files we use in the project, but one of them is the "main.css" used throughout the site. For example, there are few selectors that need to have !important used within them so we can be always sure they have an effect once applied. Also with SASS we include couple plugin related scss which also go into the final main.css, these styles won't pass csslint either and we'd really don't want to start forking their styles.

Currently if I were to allow these few CSSLint errors (!important + few others from the plugin stylesheets) to pass, I'd have to allow using !important etc everywhere in the main.css file, then it'd be easy for other team members to break these CSSLint best practises as well since they do not get any errors now.

What I'd wish is to be able to set per-section based CSSLint rules, or rather "exceptions" to per-file rules. So I could have something like this inside one css file:

/*csslint empty-rules: true, important: true*/

.foo { color: red !important; } // throws an error

.empty-one {} // throws an error

/*csslint exceptions important: false*/

.bar { color: blue !important; } // doesn't throw an error

.empty-two {} // throws an error

/*csslint /exceptions*/

.baz { color: green !important; } // throws an error

.empty-three {} // throws an error

I think this kind of convention would do good for use of CSSLint: Since those CSSLint rules are really good practises, but many times one needs to make couple exceptions meaning they have to turn of the whole rule from CSSLint. This "exception syntax" I propose would allow making of thoughtful exception(s) to a rule.

[Nicole Sullivan]

I'd be concerned that your team would start adding exceptions too. 

What about raising the allowed number of !importants within that rule?

Nicole

--
You received this message because you are subscribed to the Google Groups "CSS Lint" group.
To unsubscribe from this group and stop receiving emails from it, send an email to css-lint+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Nicole Sullivan]

That said, I also kind of like the idea of line by line approval.

[Nicholas Zakas]

I don't know, this seems overly complex to me. Having per line exceptions seems like it defeats the purpose of using such a tool. I would much rather have per file exceptions and separate things out into smaller files.

That said, attempting to implement something like you suggest is a lot of work. The parser skips over all comments, so it's not easy to pick up intermittent comments in the code. The per file exceptions are done with simple string methods before the parsing starts, but we don't have the capability right now to find comments in the middle of code.

If someone wants to attempt such an implementation, I'd be happy to review it, but I myself certainly don't have the time to dedicate to such a major task for what seems like an edge case.

-N

--

______________________________
Nicholas C. Zakas
@slicknet

Author, Professional JavaScript for Web Developers
Buy it at Amazon.com: http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3