Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We were pretty stoked to get HTML linting back into the editor as the “Analyze HTML” command, to join its pals “Analyze CSS” and “Analyze JS”. We started actually using them a lot more. Then we got annoyed. The default settings for the analyzers we were using were a little more opinionated than we liked.

For example, if you used the box-sizing property in CSS it would tell you that’s not supported in IE 6. We’re 99.99999% sure you don’t care. 😆. So we updated the rules!

Here’s the new CSS configuration we use for CSS Lint:

cssRules: {

  // Would warn you when you use width and padding together.
  // We think you know what you're doing there.
  "box-model": 0,

  "display-property-grouping": 1,
  "duplicate-properties": 1,
  "empty-rules": 1,
  "known-properties": 1,

  // You order those properties in any way you got-danged please.
  "order-alphabetical": 0,

  // If you want to do .foo.bar, go right ahead.
  "adjoining-classes": 0,

  // This not working in IE 6 isn't much of an issue anymore.
  "box-sizing": 0,

  // Often enough, autoprefixer does this work!
  "compatible-vendor-prefixes": 0,
  "gradients": 1,
  "text-indent": 1,
  "vendor-prefix": 1,
  "fallback-colors": 1,
  "star-property-hack": 1,
  "underscore-property-hack": 1,
  "bulletproof-font-face": 1,
  "font-faces": 1,
  "import": 1,
  "duplicate-background-images": 1,
  "regex-selectors": 1,

  // You're free to use the * selector as you please.
  "universal-selector": 0,

  "unqualified-attributes": 1,
  "zero-units": 1,
  "overqualified-elements": 1,
  "shorthand": 1,
  "floats": 1,
  "font-sizes": 1,
  "ids": 1,
  "important": 1,
  "outline-none": 1,
  "qualified-headings": 1,
  "unique-headings": 1

And we’re removing one of the default rules in HTML Inspector as well:

excludeRules: [
  // Would warn you about <div> and <span> without attributes
  // Sometimes you just need an element, ya know?

As part of HTML analyze, we actually added back a rule we used to ignore. It is called unused-classes and its job is to match up HTML and CSS and let you know if you are using HTML classes that there is no CSS for. That’s working now! So you’ll get a warning if you use a class name (that doesn’t start with js-*) that is unused.

We also took a look at the default rules for JS Hint and decided: good job JS Hint, you’re cool as-is.

I’m afraid we don’t allow you to customize these to your own liking just yet. Maybe someday!