CSS Reviewr: The Rules

The Rules™

CSS Reviewr checks your code against the following conventions and best practices:

One Selector per Line

For best readability and maintainability, each selector should be placed on its own line, like:

.myclass,
.anotherclass {
    background: #ccc;
}

In comparison, this should be avoided:

.myclass, .anotherclass {
    background: #ccc;
}

As well as this:

.myclass, .anotherclass {background: #ccc;}

Color definitions

No color keywords

Color keywords are essentially meaningless (except black and white), because by declaring a color as gray for example is not very precise, because there can be thousands of shades of grey.

Use shorthand for hex colors when possible

To save a few bytes in the CSS, hex colors should be shortened when possible. It is possible to shorten a hex color if all letters or digits in the HEX color code are the same. Example:

.myclass {
    background: #cccccc;
}

can be shortened to

.myclass {
    background: #ccc;
}

Use lowercase characters

It is common these days to server static files (HTML, CSS and JavaScript) using gzip. gzip works best if the content it compresses has as little variations as possible. So for example if a text only uses lower case characters of the alphabet (a-z), the compression rate will be higher than if upper and lowercase characters are used (a-z, A-Z). CSS files usually only contain lowercase characters, so by writing HEX color codes in uppercase characters, gzip will have to add these additional uppercase characters to its index, which will increase the file size.

So instead of this

.myclass {
    color: #E3FFE3;
}

we should write it like this

.myclass {
    color: #e3ffe3;
}

Leave out unit when declaring a zero value

No matter where values are declared throughout the CSS, whenever a zero value is specified, there is no need to append a unit to it.

For example, in this case:

.myclass {
    margin: 0px;
}

Adding 'px' does not achieve anything. So we can safely leave it out:

.myclass {
    margin: 0;
}

No quotes around URls

As per the W3C specifications, putting URIs in quotes is optional

Instead of this:

.myclass {
    background-image: url('http://myserver.com/img/header.png') top left no-repeat;
}

We can rewrite this to:

.myclass {
    background-image: url(http://myserver.com/img/header.png) top left no-repeat;
}

margin/padding shorthand

If either the margin or padding shorthand property is used, the values should be checked to see if they can be shortened even further.

Let's take a look at this example:

.myclass {
    margin: 4px 0 4px 0;
}

Because the values for top & bottom, as well as left & right are equal, we can rewrite this to:

.myclass {
    margin: 4px 0;
}

Unitless line height

The property line-height can accept unitless number values. Eric Meyer provides a detailed explanation

Double float margin bug

Whenever a float and a margin are set in the same direction, this will trigger the IE5/6 Doubled Float-Margin Bug. If having this combination in the CSS declaration cannot be avoided, using display:inline will fix this for IE5/6.

inherit keyword

Using the inherit keyword should be avoided, because Internet Explorer 7 and earlier versions don�t support the value inherit for any properties other than direction and visibility. (Reference)

zoom:1, clear:both in the same selector

zoom:1 and clear:both should not be necessary to be applied to the same element selector. zoom:1 contains floats whereas clear:both: clears floats. This might be an indication for floats not being properly contained.

Dotted border bug

IE6 has a CSS bug that when a 1px dotted border is specified, it is displayed as a dashed border instead.

position: absolute and margin-top

When using position:absolute, it should not be combined with margin-top. The regular top property should be used instead