csslint/csslint

Automated linting of Cascading Stylesheets

CSSLint

CSSLint is an open source CSS code quality tool originally written by Nicholas C. Zakas and Nicole Sullivan. It was released in June 2011 at the Velocity conference.

A lint tool performs static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer.

CSSLint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.

Integration

Command Line Interface

All about the command line interface for CSSLint. If you'd rather use a CLI program to verify your CSS instead of using the web site, then this guide is your best friend. https://github.com/CSSLint/csslint/wiki/Command-line-interface

Build System

Once you're familiar with the CSSLint command line interface, the next step is to integrate it into your build system. This guide walks through using CSSLint as part of your build. https://github.com/CSSLint/csslint/wiki/Build-System-Integration

IDE

You can integrate CSSLint into your favorite IDE to make checking your CSS code quality easy. In fact, some IDEs already have CSSLint built in. https://github.com/CSSLint/csslint/wiki/IDE-integration

Rules

Not sure why a rule is important? This guide talks about each of the CSSLint rules and explains how the rule is designed to improve your CSS. https://github.com/CSSLint/csslint/wiki/Rules

Developer Guide

If you want to contribute to the project, or even just tinker on your own, this guide explains how to get the source and work with it. https://github.com/CSSLint/csslint/wiki/Developer-Guide

Contributors

1. Samori Gorse, https://twitter.com/shinuza (Rules, Non-zero Exit Code for CLI)
2. Eitan Konigsburg, https://twitter.com/eitanmk (Rhino CLI)
3. Ben Barber (Compatible Vendor Prefix Rule)
4. Eric Wendelin, http://eriwen.com (Output formatters)
5. Kasper Garnaes, http://reload.dk (Checkstyle XML format)
6. Gord Tanner, http://www.tinyhippos.com (CLI quiet option)
7. Hans-Peter Buniat, https://github.com/hpbuniat (Duplicate background image rule)
8. Dino Chiesa, https://github.com/DinoChiesa (Windows Script Host CLI)
9. Tomasz Oponowicz, https://github.com/tomasz-oponowicz (XML format and CLI fixes)
10. Julien Kernec'h, https://github.com/parallel (Fixed a rule)
11. Cillian de Róiste, https://plus.google.com/116480676247600483573/posts (Node CLI fixes)
12. Damien Sennm, https://github.com/topaxi (README fixes)
13. Jonathan Barnett, http://twitter.com/indieisaconcept (JUnit formatter)
14. Zach Leatherman, http://www.zachleat.com/ (bug fixes)
15. Philip Walton, http://philipwalton.com (Rules fixes, bug fixes)
16. Jeff Beck, http://www.jeffbeck.info (Rules fixes, bug fixes)
17. Jay Merrifield, https://github.com/fracmak (Rules fixes)
18. Michael Mattiacci, http://mattiacci.com (Rules fixes)
19. Jonathan Klein, http://www.jonathanklein.net (Bulletproof font-face rule)
20. Shannon Moeller, http://shannonmoeller.com (Embedded rulesets)
21. Nick Schonning, https://github.com/nschonni (Contributing.md, grunt build)
22. Jared Wyles, https://github.com/jaredwy (Managing pull requests, endless advice)
23. Scott Gonzalez, https://github.com/scottgonzalez (JSON config)

csslint's Issues

parser error on nested @ rules

@media print {
  img { max-width: 100% ; }
  @page { margin: 0.5cm; }

}

is the repro

Option to show what was linted (feature request)

It’d be nice to have the option to see the code CSSLint checked at the bottom, like W3 validators do. This would of course be minimised by default.

Warning for 'heading already defined' when using @media queries

If you are overriding styles for headings in media queries (e.g. for smaller screens or for print) you still get a warning.

[Feature] Links to discussion/motivation in documentation

For this kind of project I think it would be very helpful if the documentation included links to the blog posts, articles and such that have motivated each rule. This will help educate users.

HTML5Boilerplate does something similar.

Padding on inline elements goes extremely well with Fitts’ Law

While margin is ignored by good browsers, padding on inline elements is perfectly okay. I’m sure it’s a slight oversight though. :)

Display property grouping: float cannot be used with inline-block

Should I get this warning with float:none?

Support `@media (max-width: 30em) {}`

Looks like CSS Lint can’t parse media queries of the form @media (max-width: 30em) {} yet. Note that it does in fact handle the needlessly verbose @media all and (max-width: 30em) {} correctly.

(As a side note, it might be a good idea to recommend omitting the all and in cases like these since it only adds more bytes.)

http://mths.be/60277264855740416
http://mths.be/60278308683784193

Can't differentiate between h1 and .h1 etc.

Using headers and matching class names (as in OOCSS eg h1, .h1 {}) returns the error 'Heading has already been defined'

h2 a, h2 a:active => Heading (h2) has already been defined.

This line:

h2 a, h2 a:active, h2 a:hover, h2 a:visited, h2 a:link {

gives me five Heading (h2) has already been defined. errors.

Incorrect warning: "float can't be used with display:inline"

display:inline will just be ignored when using float - unless in IE6, where it is used as a fix for the double-margin bug on floats - so the warning text could be altered to reflect this.

Doc: 10+ floats => "some sort of abstraction". What kind?

Using0 float for layout isn't a great idea, but sometimes you have to. CSS Lint simply checks to see if you've used float more than 10 times, and if so, displays a warning. Using this many floats usually means you need some sort of abstraction to achieve the layout.

I'm left puzzled by this statement. Pointers to good alternative would be welcome.

JavaScript error when style sheet begins with @font-face declaration

0 Errors reported when style sheet begins with @font-face declaration.

It choked on this:

@font-face {/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
font-family: 'bcitfont';
src: url('/images/chrome/bebas___-webfont.eot');
src: local('?'), url('/images/chrome/bebas___-webfont.woff') format('woff'), url('/images/chrome/bebas___-webfont.ttf') format('truetype'), url('/images/chrome/bebas___-webfont.svg#webfontnqJLEELI') format('svg');
font-weight: normal;
font-style: normal;
}

When I remove it it works fine.

Warning when overriding properties within the same selector.

Properties that override other properties within the same selector should throw a warning. I'm not sure if this applies for EVERY case, but definitely for cases such as:

.foo { color: #000; display: inline; color: #FFF; } 

If file begins with @font-face, error occurs

I believe it's choking when given the following CSS: https://gist.github.com/1028267

This is the content that is displayed:

CSS lint found 0 errors and 0 warnings. How can you fix it? See the details below.

And in the detail area:

16 lines  3 errors  5 warnings

But everything in the area is blank, appearing broken. This is in FF4 and Chrome newest stable (not dev/canary).

Floats rule counts float: none

I think that "Too many floats" rule should not count "float: none".

Remove box model warnings when padding/border are on top/bottom with width

There are box model warnings given when a width is used along with top or bottom padding or border. These shouldn't be flagged unless there is a height.

@-webkit-keyframes rule not supported

Example:
@-webkit-keyframes slideInUp { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }

Parser erroneously flagging border-bottom-left-radius as missing

The properties in the rule are liste like this:

    -webkit-border-radius: 3px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius: 3px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius: 3px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;

It's flagging as warnings missing border-bottom-left-radius and border-bottom-right-radius based on the -moz- properties it sees.

CSS Lint should do validation

was: wrong shorthand font syntax should return an error

Rules like these:

.selector {
    font: 2em;
}
.selector {
    font: bold 2em;
}

Should return an error as the shorthand syntax requires at least to declare a font-size and a font-family.
The above may work in IE6 quirks, but should fail in modern browsers.

Standard property should only be required with vendor-prefixed when stable

"Vendor prefixed properties should also have the standard."

(Ported from CSSLint/parser-lib#8)

This should only be required for vendor fixed properties that developed into a stable spec. Otherwise, it defeats the entire point of vendor prefixes.

For example, it does not make sense to include user-focus when using -moz-user-focus, even though a W3C Working Draft exists. On the other hand, it does make sense to include transform as well as its vendor prefixed variants, despite the spec still in the Working Draft stage.

Links:
http://www.w3.org/TR/2000/WD-css3-userint-20000216
https://developer.mozilla.org/en/CSS/-moz-user-focus
http://www.w3.org/TR/css3-2d-transforms/
https://developer.mozilla.org/en/css/-moz-transform

When using @font-face i get no result

Something like this:

https://raw.github.com/gist/1028573/ea0b7300546a74c9743375604aa6534037087fd9/gistfile1.txt

This is what i get:

http://i51.tinypic.com/1z6e643.jpg

Remove Display Property Grouping warning with side padding

There is a warning that says: padding can't be used with display: inline.

But that's only true on the top and bottom of an element. Padding can be used on the sides of an inline element.

A property with these values: padding: 0 4px 0 6px; - should not be flagged.

cursor:pointer @ .error, default @ .results - should be the other way around

You can click on the results table to jump to the line in the source code. However, the cursor doesn't indicate any kind of interaction; it's the default one.

Below in the source code, the cursor changes to pointer if an error is hovered. However, clicking there does nothing. (Tooltips would be nice here, by the way.)

rule suggestion: sluggish hover

Since :hover should be as far to the right as possible, this is another thing which could be checked.

I'm not really sure where the line should be drawn though. But then again... if it can be turned on and off, it's probably fine to nag if :hover isn't at the very right.

display: inline should not use [...] padding - why?

Padding works fine on inline element. So, what's the reason for this rule?

Isn't this what everyone does if you want to add some icon to some link?

Width of 100% and CSS3’s box-sizing property

I think it would be a good addition to the parser to omit the warning if the following is found.

div {
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

adjoining classes not a problem in ie7

.foo.bar { color: red; }

causes

Adjoining Classes Don't use adjoining classes.
IE6, IE7

but its only ie6 that has an issue with those. 7 is peachy with 'em

More detailed rules for prefixed properties

Currently CSS Lint requires the use of all vendor prefixes for gradients. However, for other properties it just says that I should add the standard property at the bottom. This is sub optimal for a number of reasons.

1. Some properties are not stable enough yet. E.g. CSS keyframe based animation. This is actually bad, but encouraged by CSS Lint:

   
   div {
       -webkit-animation-name: bounce;
        animation-name: bounce;
   }
   

   Why is it bad? Because (a) I am excluding Firefox 5 and (b) the syntax may still change. Thus this is better:

   
   div {
     -webkit-animation-name: bounce;
       -moz-animation-name: bounce;
   }
   

Ergo CSS Lint should not require the usage of non-prefixed properties for rules that are still in the very early stages of experimental implementations. But a notice could be in order, when people code Webkit or Gecko exclusive code. (It's rarely anything but Webkit these days...)

BTW, this problem is not solved by turning off the rule. I still would like to be notified when I don't use all available prefixes.

1. Besides gradients all major browsers of today support or is about to support 2D-transforms and therefore they should be treated like gradients.
2. Same goes for (non keyframe) transitions.

It seems we need a lookup table of some sort, based on this table.

rule suggestion: universal selector as key selector

E.g. .foo * or just *.

It's a silly thing to do and easy to catch.

make license info an important comment to help minifiers preserve it

e.g.:

/*!
Somthing very important
*/

Awww but I LIKE ID selectors =)

Sweet project Nicole!

I'd say that "Don't use ID selectors." is a bit controversial. They are the most efficient selector you can write in terms of rendering speed: https://developer.mozilla.org/en/Writing_Efficient_CSS

Could Overqualified Elements check rest of usage?

For a class, if every occurrence of element.my-class is div.my-class, then of course that looks overqualified and unnecessary. But if I have li.my-class dt.my-class and dd.my-class, then they do not appear to be overqualified.

I think this warning should only be displayed if every occurrence of element.class is a reference to the same HTML tag name.

xhtml doctype

why oh why?

Warning - Don't use adjoining classes should be IE6 only

Just a little tweak. :)

Broken box model: Using width with padding-right.

Should this warning be displayed when width:auto and/or padding:0?

Adjoining classes are supported in IE7

Incorrect error message relating to adjoining classes (also on 'about' page). They are supported in IE7, although not in IE6.

Documentation: NPM installation problem

This is awesome, thanks!

The command for installing CSS Lint as shown at http://csslint.net/about.html#node does not work:

$ sudo npm install -g CSS Lint

npm ERR! couldn't read package.json in CSS
npm ERR! Error: ENOENT, No such file or directory 'CSS/package.json'
npm ERR! Report this *entire* log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>
npm ERR! 
npm ERR! System Darwin 10.7.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "CSS" "Lint"
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/taco/tmp/npm-debug.log
npm not ok

The command that does work for me to install CSS Lint with NPM:

sudo npm install -g csslint 

Incorrect warning when using float:none with display:inline | inline-block

If a ruleset removes floating, i.e. float:none, and includes a display value other than block, it still displays a warning about combined float and certain display values.

Warning for !important declarations

!important can quickly become an abused tool if not properly designing your CSS, and while certainly useful for leaf nodes or user-stylesheets, it should be noted that overuse can quickly create unneeded complexity with regards to specificity.

@media { @page{} } throws error.

in html5boilerplate style.css:

 @page { margin: 0.5cm; }

throws an error while this is syntactically an edge case, it's correct to define the page-box.

UI confusing when 0 errors/warnings

@font-face rules cause CSS Lint to fail:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot?') format('eot'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font: 100%/1.5 BebasNeueRegular;    
}

Warning should not be given if float: none is used for display: table-cell, inline-block, etc

Warning is: float can't be used with display: table-cell. (And that's true)

But the flagged value is: float:none;

It would be awesome if the parser could notice when a value is being reset to a legal value. :)

Allow verifying via URL (feature request)

It’d be nice to have the option to check CSS via a URL, like validators. It’d also be cool to point to a webpage and have CSSLint pull in all styles (linked, imported, in <style>, inline) on that page, although this’d be a bit more work.

Line number column too narrow

On the output page, that table below the results which contains the syntax-highlighted code...

The line number column only looks fine if there are 1-2 digits. As soon as there are 3 or more it overflows.

Removing table-layout:fixed from .data table (style.css:167) solves this issue.

Heading elements can be scoped in HTML5

There are two related CSS Lint rules set right now that absolutely make sense for HTML 4 and XHTML, but as far as I know don't apply to HTML5:

Don't qualify headings
Heading elements (h1-h6) should be defined as top-level styles and not scoped to particular areas of the page.

Heading styles should only be defined once
Heading elements (h1-h6) should have exactly one rule on a site.

In HTML5, you can scope headers to document sections. This allows for re-use of the h1-h6 tags across multiple sections on the same page. HTML5-capable browsers will create the proper hierarchy and default styles for each set.

It seems like the CSS Lint team is working on allowing users to turn on/off each warning, but these rules specifically might need an "* unless you are using HTML5" note in the documentation.

Unexpected token '6ch' (CSS3 relative length units)

E.g.: width:6ch.

http://www.w3.org/TR/css3-values/#relative0

I don't agree with the "Don't qualify headings" rule

With HTML5, we can have headings embeded in sectioning elements (section, article, aside, nav). It helps reuse HTML blocks created by CMS for example.

When a heading gets deeper embeded, I think it should be rendered accordingly. That's what I tried in HTML5 Titles Inception

It needs qualified headings.

Wrong links on csslint.com

http://csslint.net/about.html links to:

https://github.com/stubbornella/CSS%20Lint[...] (note the space)

in 4 places.

Style rules like whitespace and indentation + lowercase

CSS Lint would be an even more awesome tool for me as a teacher if it would require my students to use proper style rules, especially for white space and indentation. (Note that github won't give me monospace fonts in pre-block, so it's hard to show exactly what I mean.

Rules I like (starting point of conversation):

1. Always indent blocks (using 4 spaces). (Single property rules may be allowed on one line.)
2. Align vendor prefixed properties on the colon - ignore rule 1 for these.
3. Alternate style: Align all properties on the colon...)
4. Require a trailing space after comma - in properties as well as values like RGB(A) and HSL(A)
5. Require a space between each token in child selector rules. Disallowing .foo>span, requiring .foo > span.
6. Require a space after the colon in properties. (Exactly one)
7. Disallow a space before the colon.
8. Require a semi-colon on the last rule in each block. (It's soo easy to forget this when adding another property.)
9. Require all element selectors to be lower case, all property names to be lower case and all property values to be lower case. (XML users may turn this off.)

Using width: 100% not a problem with a parent with padding

Using width: 100% on an element whose parent element has
padding will result in the child stretching outside
of the parent's bounding box.

I think that's wrong. The Child will only stretch outside of the parents's box, if it has padding/margin/border by itself. It doesn't matter if the parent has padding.