CSSLint
Expand Minimize

CSSLint

Runs CSSLint analysis tool.

Intention

CSS Lint 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.
CSS Lint points 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.
More information about CSS Lint can be found at http://csslint.net/

How is CSSLint integrated

The code of CSSLint is written in JavaScript and can be downloaded here:
https://github.com/stubbornella/csslint

To run this JavaScript code during an analysis SPCAF uses a JavaScript engine for .NET and executes the CSSLint analyzer. The CSSLint javascript file is packaged into SPCAF as a resource (so no online connection is necessary during analysis). The results of the analysis are added to the SPCAF reports.

SPCAF integrates each CSSLint rule as a separate SPCAF rule. This allows you to activate or deactivate each CSSLint rule separately in your SPCAF rulesets.

Disabled Rules by Default

SPCAF provides all CSSLint rules but not all rules are enabled by default because several rules are controversial.
The following rules are disabled by default in all standard SPCAF rulesets:

  • Don't use adjoining classes
  • Don't use too many floats
  • Don't use too many web fonts
  • Don't use too many font-size declarations
  • Don't use IDs in selectors
  • Don't qualify headings
  • Define headings only once

Refer to the following sources for more information

Index

Rule Description Type Severity
CSL308801: Avoid unwanted box model sizing issues in CSS The box model is one of the most frequently misunderstood parts of CSS. 'Box model' refers to the series of boxes that make up an element visually. This starts with the content, which is the inner-most box. Content is surrounded by padding, which in turn is surrounded by borders. The way these measurements interact, however, is a bit confusing. CSSFile Warning
CSL308802: Avoid properties that don't work based with the display property being used in CSS Even though you can define any group of properties together in a CSS rule, some of them will be ignored due to the display of the element. This leads to extra cruft in your CSS and misunderstandings around how a rule should work. CSSFile Warning
CSL308803: Avoid duplicate properties in CSS This rule is intended to find errors of duplication in CSS code. It warns when a property is included twice and contains the same value or a property is included twice and is separated by at least one other property. CSSFile CriticalWarning
CSL308804: Avoid un anchored hovers in CSS When <!DOCTYPE> Strict is set, IE expects the :hover selector to always be anchored with the <a> tag. CSSFile Warning
CSL308805: Avoid empty rules in CSS An empty rule is one that doesn't contain any properties. This rule warns when an empty rule is found in the CSS. CSSFile CriticalWarning
CSL308806: Use only known properties in CSS This rule checks each property name to make sure that it is a known CSS property. The CSS property list is maintained as part of the CSS parser and this rule uses the parser information to determine whether or not the property has been verified. CSSFile CriticalWarning
CSL308807: Avoid adjoining classes in CSS Adjoining classes, sometimes also called class chaining, look like .foo.bar. While technically allowed in CSS, these aren't handled properly by Internet Explorer 6 and earlier. CSSFile Warning
CSL308808: Avoid property box-sizing in CSS This rule warns when the box-sizing property is used. The intent is to ensure that developers realize this property is not supported in older browsers such as Internet Explorer 6 and 7. CSSFile Warning
CSL308809: Use compatible vendor prefixes in CSS This rule is intended to warn when a vendor-prefixed property is missing. CSSFile Warning
CSL308810: Use all gradient definitions in CSS This rule warns when one vendor-prefixed gradient is used without all of the others. CSSFile Warning
CSL308811: Avoid negative text indent in CSS This rule is intended to find problematic uses of text-indent in CSS code. It warns when a text-indent value of -99 or similar (i.e., -100, -999, etc.) is used without the use of direction: ltr. CSSFile Warning
CSL308812: Use standard property with vendor prefix in CSS This rule is aimed at ensuring standard properties are included whenever vendor-prefixed properties are used. As such, the rule warns when it finds a vendor-prefixed property without a standard property after it or a vendor-prefixed property with a standard property defined before it. CSSFile Warning
CSL308813: Use fallback colors in CSS This rule is aimed at ensuring a proper color is displayed for all browsers. As such, the rule warns when it finds a color property with a rgba(), hsl(), or hsla() color without a preceding color property that has an older color format, a background property with a rgba(), hsl(), or hsla() color without a preceding background property that has an older color format or a background-color property with a rgba(), hsl(), or hsla() color without a preceding background-color property that has an older color format. CSSFile Warning
CSL308814: Avoid star hack in CSS This rule is aimed at eliminating the use of the star hack in CSS. As such, the rule warns when it finds a property preceded with an asterisk. CSSFile Warning
CSL308815: Avoid underscore hack in CSS This rule is aimed at eliminating the use of the underscore hack in CSS. As such, the rule warns when it finds a property preceded with an underscore. CSSFile Warning
CSL308816: Use bulletproof font face in CSS This rule is aimed at preventing 404 errors in Internet Explorer 8 and earlier due to a bug in how web font URLs are parsed. CSSFile Warning
CSL308817: Do not use too many web fonts in CSS Web fonts are growing in popularity and use of @font-face is on the rise. However, using web fonts comes with performance implications as font files can be quite large and some browsers block rendering while downloading them. For this reason, CSSLint will warn you when there are more than five web fonts in a style sheet. CSSFile Warning
CSL308818: Do not use @import in CSS This rule warns when @import is being used in CSS. CSSFile Warning
CSL308819: Avoid selectors that look like regular expressions in CSS This rule is aimed at flagging selectors that have the potential to cause performance issues. As such, this rule warns when a selector is found using *=, |=, ^=, $=, or ~=. CSSFile Warning
CSL308820: Do not use universal selector in CSS This rule is aimed at flagging slow rules due to the use of the universal selector. As such, the rule warns when the universal selector is found as the key part of a selector. CSSFile Warning
CSL308821: Do not use unqualified attribute selectors in CSS This rule is aimed at flagging slow rules due to the use of the unqualified attribute selectors. As such, the rule warns when an unqualified attribute selector is found as the key part of a selector. CSSFile Warning
CSL308822: Do not use units for zero values in CSS This rule is aimed at flagging zero values that still have units. As such, it warns when 0 is found followed by a unit or a percentage sign. CSSFile CriticalWarning
CSL308823: Avoid overqualified elements in CSS This rule is aimed at decreasing byte count by removing extra unnecessary qualifiers from selectors. As such, it warns when an element and class name are used together (i.e., li.active). It will not warn if two different elements are found with the same class name (i.e., li.active in one rule and p.active in another). CSSFile Warning
CSL308824: Use shorthand properties in CSS This rule is aimed at decreasing file size by finding properties that can be combined into one. As such, it warns in the following cases: when margin-left, margin-right, margin-top, and margin-bottom are used together in a single rule or when padding-left, padding-right, padding-top, and padding-bottom are used together in a single rule. CSSFile CriticalWarning
CSL308825: Do not use duplicate background images in CSS This rule is aimed at ensuring the same URLs aren't used more than once in a style sheet. CSSFile Warning
CSL308826: Avoid too many floats in CSS This rule is aimed at reducing complexity by watching how many times float is used. It warns when float has been used more than 10 times. This amount of floats usually indicates that there are a lot of columnar layouts being defined and that a grids system would be a better choice for your CSS. CSSFile Warning
CSL308827: Do not use too many font size declarations in CSS This rule is aimed at pointing out opportunities for abstracting font sizes. The rule warns when 10 or more font-size declarations are found. CSSFile Warning
CSL308828: Do not use IDs in selectors in CSS This rule is aimed at improving maintainability by flagging the use of IDs in selectors. Every instance of an ID will result in a warning. CSSFile Warning
CSL308829: Do not use !important in CSS This rule is aimed at keeping your specificity levels in check. As such, it warns whenever !important is used. CSSFile Warning
CSL308830: Do not use outline:none in CSS This rule is aimed at ensuring keyboard-only users have a visual indicator of focus. As such, the rule warns when it finds a outline: none or outline: 0 in any rule whose selectors doesn't contain :focus or a outline: none or outline: 0 in any rule whose selectors contains :focus and the rule doesn't contain any other properties CSSFile CriticalWarning
CSL308831: Do not use qualified headings in CSS This rule is aimed at finding qualified heading rules, and as such warns when any rule contains a selector where the heading element is last. CSSFile Warning
CSL308832: Define headings only once in CSS This rule is aimed at flagging duplicate heading declarations. As such, a warning occurs when more than one rule defines properties targeted at the same heading. CSSFile Warning
Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.