{"AverageDeclarationsPerRule":{"id":"AverageDeclarationsPerRule","title":"Keep average Declarations per RuleSet low","html":"

Declaration Block size should be consistent and small to avoid inconsistencies in the CSS, which could make it hard to debug. Scoring high here this means that RuleSets contain many Declarations on average.

\n","unit":"Declarations per RuleSet","format":"number","category":"maintainability","meta":{}},"AverageSelectorComplexity":{"id":"AverageSelectorComplexity","title":"Keep average Selector Complexity low","html":"

Low Selector Complexity generally means that Selectors are simple. High complexity means that a Selector consists of several parts, each of which adds to the complexity of understanding what the Selector targets.

\n\n

/* complexity = 1 */\n.selector {}\n\n/* complexity = 5 */\n.selector :where(#many, .parts, [exist]) {}

\n ","unit":"Complexity points","format":"number","category":"complexity","meta":{}},"AverageSelectorsPerRule":{"id":"AverageSelectorsPerRule","title":"Keep average Selectors per RuleSet low","html":"

The average amount of Selectors per RuleSet should be low, to make scanning for the right RuleSet and finding the right Selector easy.

\n","unit":"Selectors per RuleSet","format":"number","category":"maintainability","meta":{}},"CssSize":{"id":"CssSize","title":"Keep filesize low","html":"

Having large amounts of CSS will slow down your webpage, so it is important to keep CSS filesize low.

\n","format":"size","category":"performance","meta":{}},"DeclarationDuplications":{"id":"DeclarationDuplications","title":"Declaration Duplications","html":"

To keep filesize at a minimum, Declarations should not be repeated too often. A lot of duplicated Declarations are a sign that something could be abstracted away or pieces are possibly obsolete and need a cleanup.

Scoring high here means a lot of Declarations (combinations of the same Property and Value) are duplicated across the CSS.

\n","unit":"Declaration duplication","format":"percentage","category":"performance","meta":{}},"EmptyRules":{"id":"EmptyRules","title":"Remove empty RuleSets","html":"

Empty RuleSets do not contribute to any styling and should be removed. Keeping these RuleSets will make your page (slightly) slower because they still have to be transferred over the network, although they will have no effect on the page.

\n","unit":"empty RuleSets","format":"number","category":"performance","meta":{}},"IdSelectorRatio":{"id":"IdSelectorRatio","title":"Avoid ID Selectors","html":"

The amount of ID Selectors in CSS should be low to avoid specificity issues.

\n","unit":"ID Selectors","format":"percentage","category":"complexity","meta":{}},"ImportantRatio":{"id":"ImportantRatio","title":"Keep `!important` usage low","html":"

The amount of !important Declarations in CSS should be low to avoid specificity issues.

\n","unit":"!importants","format":"percentage","category":"complexity","meta":{}},"Imports":{"id":"Imports","title":"Avoid `@import`","html":"

For performance reasons, @import should not be used in CSS. It blocks other downloads, like JS or images.

\n","unit":"Rules","format":"number","category":"performance","meta":{}},"MaxDeclarationsPerRule":{"id":"MaxDeclarationsPerRule","title":"Avoid many Declarations in a single RuleSet","html":"

The maximum number of Declarations in a single RuleSet should be low. A large number means the RuleSet is hard to scan and finding the correct Declaration may be troublesome.

Example of a RuleSet having a lot of Declarations:

\n\n

.my-selector {\n  display: none;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  position: absolute;\n  width: 100%;\n  min-width: 768px;\n  height: 569px;\n  margin: -1px 0 0 0;\n  z-index: 1;\n  background-color: #000;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  padding: 30px;\n}

\n ","unit":"Declarations at most","format":"number","category":"maintainability","meta":{}},"MaxSelectorComplexity":{"id":"MaxSelectorComplexity","title":"Avoid complex selectors","html":"

High complexity means that a Selector consists of several parts, each of which adds to the complexity of understanding what the Selector targets. Low complexity means that a Selector is easy to understand.

\n\n

/* complexity = 1 */\n.selector {}\n\n/* complexity = 5 */\n.selector :where(#many, .parts, [exist]) {}

\n ","unit":"Complexity points at most","format":"number","category":"complexity","meta":{}},"MaxSelectorsPerRule":{"id":"MaxSelectorsPerRule","title":"Avoid many Selectors in a single RuleSet","html":"

The maximum number of Selectors in a single RuleSet should be low. A large number means the RuleSet is hard to scan and finding the correct Selector may be troublesome.

Example of a RuleSet having a lot of Selectors:

\n\n

html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n}

\n ","unit":"Selectors at most","format":"number","category":"maintainability","meta":{}},"MoreThanMostCommonDeclarationsPerRule":{"id":"MoreThanMostCommonDeclarationsPerRule","title":"Avoid larger than usual Declaration Blocks","html":"

Declaration Block size should be consistent and small to avoid inconsistencies in the CSS, which could make it hard to debug. Scoring high here this means there are a lot of Declaration Blocks that are longer than what's most common in the CSS.

\n","unit":"Declaration(s) per RuleSet is most common","format":"number","category":"maintainability","meta":{}},"MoreThanMostCommonSelectorComplexity":{"id":"MoreThanMostCommonSelectorComplexity","title":"More than most common Selector Complexity","html":"

Selector Complexity should be consistent to avoid specificity issues or developers getting confused by different Selector naming conventions. Scoring high here this means there are a lot of Selectors more Complex than what's most common in the CSS.

\n","unit":"of Selectors complexities more complex than most common","format":"percentage","category":"complexity","meta":{}},"MoreThanMostCommonSelectorSpecificity":{"id":"MoreThanMostCommonSelectorSpecificity","title":"Avoid higher-than-usual Selector Specificity","html":"

Selector Specificity should be consistent to avoid specificity issues or developers getting confused by different Selector naming conventions. Scoring high here this means there are a lot of Selectors with higher Specificity than what's most common in the CSS.

\n","unit":"of Selectors more specific than most common Specificity","format":"percentage","category":"maintainability","meta":{}},"MoreThanMostCommonSelectorsPerRule":{"id":"MoreThanMostCommonSelectorsPerRule","title":"Avoid larger than common SelectorLists","html":"

SelectorList length should be consistent and small to avoid inconsistencies in the CSS, which could make it hard to debug. Scoring high here this means there are a lot of SelectorLists that are longer than what's most common in the CSS.

\n\n

selector1 {} /* length = 1 */\nselector2 {} /* length = 1 */\nselector3 {} /* length = 1 */\n\nselectorA,\nselectorB,\nselectorC,\nselectorD,\nselectorE {} /* length = 5 */

\n ","unit":"Selectors per RuleSet (most common)","format":"number","category":"maintainability","meta":{}},"SelectorDuplications":{"id":"SelectorDuplications","title":"Avoid many Selector code duplications","html":"

To keep filesize at a minimum, Selectors should not be repeated too often. A lot of duplicated Selectors are a sign that something could be abstracted away or pieces are possibly obsolete and need a cleanup.

Scoring high here means a lot of Selectors appear multiple times in the CSS.

\n","unit":"Selector duplication","format":"percentage","category":"performance","meta":{}},"SourceLinesOfCode":{"id":"SourceLinesOfCode","title":"Avoid many Source Lines of Code","html":"

Keeping the amount of code low makes the CSS easier to work with: finding the right place to add a new piece of code, or finding a specific line of code that's causing a problem.

\n","unit":"Source Lines of Code","format":"number","category":"maintainability","meta":{}},"TooMuchComments":{"id":"TooMuchComments","title":"Limit CSS comments","html":"

Commenting your code is good, but delivering comments to your users isn't. Your users do not benefit from commented code, but the increased file size makes receiving the file slower.

Use a tool like ParcelCSS, cssnano, or CSSO to minify your CSS and also remove comments.

\n","format":"size","category":"performance","meta":{}},"TooMuchEmbeddedContent":{"id":"TooMuchEmbeddedContent","title":"Limit embedded content","html":"

Embedding content can sometimes be helpful to reduce the total number of HTTP requests, but keep in mind that embedding content usually is sub-optimal and results in blown-up filesize and sometimes broken styling.

\n","format":"size","category":"performance","meta":{}}}