Friday, November 4, 2011

Find Basic Errors In Your CSS Code With CSS Lint

CSS Lint is a tool to relief point out problems with your CSS collection of laws. It does basic syntax checking of the same kind with well as applying a set of rules to the code that look for problematic patterns or signs of inefficacy. The rules are all pluggable, with equal rea~n you can easily write your possess or omit ones you don't longing.

Ever spend days writing the most judicious CSS code in the world singly to discover that something isn't rendering quite right? What's worse is that in the rear of spending a tedious and somewhat frustrating time distressing to find out what's ~ly, you discover it was just a basic syntax offence and that's when you ability want to kick yourself.CSS Lint is a structure app that performs a basic obstruction on your CSS code. It highlights corrigenda and warns you if there is anything in the code that might not render properly. It lists errors, line number of each mistake, a brief description of the delinquency and how to fix it. The app also tells you if the error direction reflect across all browsers or suitable one particular browser.

The app checks the collection of laws based on 19 different rules, you be able to choose to have the app ignore any one of them by unchecking the several box on the home page. To series of measures code, simply copy and past it in to the realm provided and hit Lint.

Errors are identified by a red warning sign while warnings are identified through yellow ones.

The CSS Lint Rules

Parsing corrigenda should be fixed

By default, CSS Lint shows at all parsing errors. Parsing errors usually medium you mistyped a character and may final ~ the browser to drop your prevail or a property. Parsing errors are presented like errors by CSS Lint, the greatest in number important issues to fix.

Don't conversion to an act adjoining classes

Adjoining classes look like .foo.tribunal. While technically allowed in CSS, these aren't handled fitly by Internet Explorer 6 and earlier.

ID: adjoining-classes

Remove hollow rules

Any rule that doesn't contain any properties, such as:

.foo {}

A fate of times, empty rules appear while a result of refactoring without to a greater distance cleanup. Eliminating empty rules results in smaller toothed sizes and less style information because of the browser to deal with.

ID: vacant-rules

Use correct properties for a unfold

Even though you can define at all group of properties together in a CSS dominion, some of them will be ignored just title to the display of the constituent principle. This leads to extra cruft in the CSS toothed. The list of properties that CSS Lint checks on this account that are:

display: inline should not conversion to an act width, height, margin (and all variants), padding (and wholly variants), or float.

display: inline-stop should not use float.

display: make steady should not use vertical-align.

parade: table-* should not use margin (and all variants) or float.

Removed the ignored or problematic properties decreases file size and improves achievement.

ID: display-property-grouping

Don't practice too many floats

Using float on account of layout isn't a great form, but sometimes you have to. CSS Lint alone checks to see if you've used swim more than 10 times, and whether or not so, displays a warning. Using this sundry floats usually means you need more sort of abstraction to achieve the layout.

No comments: