CSS LINT, optimizing your CSS style sheet

CSS Lint can analyze and detect your website CSS style sheet without any potential problems, using the method is very simple, just need to copy the CSS content, and finally press lint! button to check it. There are some settings items can adjust the detection of items and rules, presets are all checked, if there is no special requirements can not change, after the completion of CSS Lint will tell the user the style sheet which parts of the problem, as long as the site's instructions to modify can be compared to the problem of the CSS style sheet!

Site Name: CSS Lint

Website Link: http://csslint.net/

Using the method is very simple, enter the CSS lint! Copy and paste the contents of the CSS file on your website, press lint! Perform.

At the top of the results, there are several errors and warnings (the need for immediate correction of errors), and below is a list of which parts of the first line are in question, which can be modified by referring to the most recent description.

Keeping CSS in the right state is a very important job! If you are also a website manager, check with this tool to see if there are any problems after updating the CSS style sheet.

CSS Lint Some of the existing rules:

Fix parsing error (parsing errors should be fixed)
Avoid using multi-class selectors (Don ' t use adjoining classes)
IE6 and older browsers are not parsed correctly for similar. Foo.bar multi-class selectors, refer to the multi-class selector under IE6.
Remove empty CSS rules (remove empty rules)
This rule does not contain any attributes, similar to:

1

. Foo {}

The reason for the creation of the empty rule is generally to reserve the style. Removing these empty rules can undoubtedly reduce the size of the CSS document.

Correct use of display attributes (using correct properties for a display)
Because of the function of display, some style combinations will not work, and the increase of style volume also affects the parsing performance. CSS Lint will check the points:
width, height, margin, padding, and float should not be used after display:inline.
Float should not be used after display:inline-block.
Vertical-align should not be used after display:block.
You should not use margin or float after display:table-*.

Do not misuse floating (Don ' t use too many floats)
Although floating is unavoidable, there is no denying that many CSS bugs are caused by floating. CSS Lint alerts you when you detect a float that has more than 10 times in the style file.

Do not misuse Web fonts (Don ' t use too many Web fonts)
Web fonts may be unfamiliar to Chinese websites, but it is popular abroad. Web fonts are typically bulky, and some browsers block page rendering damage performance when downloading Web fonts.

Do not declare too many font-size (Don ' t use too may font-size declarations)
This is a design-level problem, and well-designed pages do not have too many font-size declarations.

Do not use ID identifiers in selectors (Don ' t uses IDs in selectors)
The main consideration is the reuse of style and the coupling of the page.

Do not define too many styles for the H1~h6 element (Don ' t qualify headings)
The whole station is unified to define the heading element again, you can use other selectors as an alternative if you want to customize the style.

H1~h6 elements are not defined repeatedly (Heading styles should only be defined once)
A value of 0 does not require any units (Zero values don ' t need units)
Standardize various browser prefixes (Vendor prefixed properties should also has the standard)
The browser prefix is usually placed in front, with the standard style attributes at the end, similar to the following:

1	. foo {-moz-border-radius:5px;border-radius:5px;}

Using advanced features such as CSS gradients, you need to specify all browser prefixes (CSS gradients require all browser prefixes)
Avoid making selectors appear as regular expressions (Avoid selectors that looks like regular expressions)
CSS3 added some complex properties like ~=, and not all browsers support it, so use it sparingly.

Compliance with box Model rules (beware of broken box models)

Some of the above rules may not be best practices and can be modified to suit your project needs, which also conforms to the purpose of CSS Lint pluggable.

CSS LINT, optimizing your CSS style sheet