In the CodePen editor, you can analyze your HTML, CSS, and JavaScript.

HTML analysis is handled by HTML Inspector, so for example, if you type <il> instead of <li>, you’ll see a warning when analyzing your HTML:

To some degree, JavaScript is linted as-you-type, so if you write some invalid JavaScript, you’ll be warned and you can fix it before it executes. But, even valid JavaScript can benefit from analysis. For that, we have JS Hint.

JS Hint has opinions.

For CSS, we used to use CSS lint. CSS lint is a great project, but it doesn’t appear to be actively maintained anymore, at a time when CSS is moving fairly fast. The stuff that CSS lint watches for is a mix of stylistic stuff and fairly strong opinions about CSS.

We made the call to switch over to Stylelint for analyzing CSS. Stylelint is an active project that supports a ton of customization.

We’ve looked through all the rules of Stylelint and picked out a set that we think will work well in the Pen Editor. We used the Stylelint standard configuration with a bit of our own customization, selecting rules that specifically watch for problems in your CSS — as in, it’s probably a mistake that would cause confusion or bugs. We did not include any stylistic or opinionated rules about how you write CSS or format it.

For the curious, our config right now is:

  config: {
    rules: {
      'color-no-invalid-hex': true,
      'declaration-block-no-duplicate-properties': true,
      'block-no-empty': true,
      'unit-no-unknown': true,
      'font-family-no-duplicate-names': true,
      'property-no-unknown': true,
      'selector-pseudo-class-no-unknown': true,
      'selector-pseudo-element-no-unknown': true,
      'selector-type-no-unknown': true,
      'media-feature-name-no-unknown': true,
      'at-rule-no-unknown': true,
      'no-duplicate-selectors': true,
      'no-extra-semicolons': true,
      'no-unknown-animations': true

So now when you Analyze CSS, you’ll get errors from Stylelint. For example:

Notice here we’re looking at Compiled CSS. We run Stylelint on your compiled CSS in the case you’re using a preprocessor.

Hopefully, you’ll get more mileage out of this feature now.

Of course this can evolve over time. For instance, Stylelint can lint some preprocessor syntax as-is, so we may start allowing that. Or the rules we use might be adjusted based on your feedback. We might even allow custom config in the Project Editor at some point, if that’s highly desired.