analyze-css：CSS 选择器的复杂度和性能分析器_html/css

analyze-css

CSS selectors complexity and performance analyzer. analyze-css is built as a set of rules bound to events fired by CSS parser. Each rule can generate metrics and add "offenders" with more detailed information (see Usage section for an example).

Analyze CSS Demo

Install

analyze-css comes as a "binary" for command-line and as CommonJS module. Run the following to install them globally:

npm install --global analyze-css

登入後複製

Usage

Command line tool

You can use analyze-css "binary" to analyze local CSS files or remote CSS assets:

analyze-css --file examples/elecena.cssanalyze-css --url http://jigsaw.w3.org/css-validator/style/base.css

登入後複製

You can provide CSS via stdin as well (notice the dash: -):

echo ".foo {margin: 0 \!important}" | analyze-css -

登入後複製

This will emit JSON formatted results on stdout. Use --pretty (or -p shortcut) option to make the output readable for human beings.

Basic HTTP authentication can be provided through the options --auth-user and --auth-pass.

CommonJS module

var analyzer = require('analyze-css');new analyzer('.foo {margin: 0 !important}', function(err, results) {  console.error(err);  console.log(results); // example? see below});

登入後複製

// options can be providedvar opts = {  'noOffenders': true};new analyzer('.foo {margin: 0 !important}', opts, function(err, results) {  console.error(err);  console.log(results); // example? see below});```

登入後複製

grunt task

Created by @DeuxHuitHuit

npm i grunt-contrib-analyze-css

登入後複製

It uses configurable threshold and compares the analyze-css result with it.

Results

{  "generator": "analyze-css v0.8.0",  "metrics": {    "base64Length": 11332,    "redundantBodySelectors": 0,    "redundantChildNodesSelectors": 1,    "colors": 106,    "comments": 1,    "commentsLength": 68,    "complexSelectors": 37,    "complexSelectorsByAttribute": 3,    "duplicatedSelectors": 7,    "duplicatedProperties": 24,    "emptyRules": 0,    "expressions": 0,    "oldIEFixes": 51,    "imports": 0,    "importants": 3,    "mediaQueries": 0,    "multiClassesSelectors": 74,    "parsingErrors": 0,    "oldPropertyPrefixes": 79,    "propertyResets": 0,    "qualifiedSelectors": 28,    "specificityIdAvg": 0.04,    "specificityIdTotal": 25,    "specificityClassAvg": 1.27,    "specificityClassTotal": 904,    "specificityTagAvg": 0.79,    "specificityTagTotal": 562,    "selectors": 712,    "selectorLengthAvg": 1.5722460658082975,    "selectorsByAttribute": 92,    "selectorsByClass": 600,    "selectorsById": 25,    "selectorsByPseudo": 167,    "selectorsByTag": 533,    "universalSelectors": 5,    "length": 55173,    "rules": 433,    "declarations": 1288  },  "offenders": {    "importants": [      ".foo {margin: 0 !important}"    ]  }}

登入後複製

Metrics

base64Length: total length of base64-encoded data in CSS source (will warn about base64-encoded data bigger than 4 kB)
redundantBodySelectors: number of redundant body selectors (e.g. body .foo, section body h2, but not body > h1)
redundantChildNodesSelectors: number of redundant child nodes selectors (e.g. ul li, table tr)
colors: number of unique colors used in CSS
comments: number of comments in CSS source
commentsLength: length of comments content in CSS source
complexSelectors: number of complex selectors (consisting of more than three expressions, e.g. header ul li .foo)
complexSelectorsByAttribute: number of selectors with complex matching by attribute (e.g. [class$="foo"])
duplicatedSelectors: number of CSS selectors defined more than once in CSS source
duplicatedProperties: number of CSS property definitions duplicated within a selector
emptyRules: number of rules with no properties (e.g. .foo { })
expressions: number of rules with CSS expressions (e.g. expression( document.body.clientWidth > 600 ? "600px" : "auto" ))
oldIEFixes: number of fixes for old versions of Internet Explorer (e.g. * html .foo {} and .foo { *zoom: 1 }, read more)
imports number of @import rules
importants: number of properties with value forced by !important
mediaQueries: number of media queries (e.g. @media screen and (min-width: 1370px))
multiClassesSelectors: reports selectors with multiple classes (e.g. span.foo.bar)
parsingErrors: number of CSS parsing errors
oldPropertyPrefixes: number of properties with no longer needed vendor prefix, powered by data provided by autoprefixer (e.g. --moz-border-radius)
propertyResets: number of accidental property resets
qualifiedSelectors: number of qualified selectors (e.g. header#nav, .foo#bar, h1.title)
specificityIdAvg: average specificity for ID
specificityIdTotal: total specificity for ID
specificityClassAvg: average specificity for class, pseudo-class or attribute
specificityClassTotal: total specificity for class, pseudo-class or attribute
specificityTagAvg: average specificity for element
specificityTagTotal: total specificity for element
selectors: number of selectors (e.g. .foo, .bar { color: red } is counted as two selectors - .foo and .bar)
selectorLengthAvg: average length of selector (e.g. for .foo .bar, #test div > span { color: red } will be set as 2.5)
selectorsByAttribute: number of selectors by attribute (e.g. .foo[value=bar])
selectorsByClass: number of selectors by class
selectorsById: number of selectors by ID
selectorsByPseudo: number of pseudo-selectors (e,g. :hover)
selectorsByTag: number of selectors by tag name
universalSelectors: number of selectors trying to match every element (e.g. .foo > *)
length: length of CSS source (in bytes)
rules: number of rules (e.g. .foo, .bar { color: red } is counted as one rule)
declarations: number of declarations (e.g. .foo, .bar { color: red } is counted as one declaration - color: red)