Count CSS selectors, nesting depth, declarations and rules in CSS files.
- To monitor simplicity of CSS files (depth/nesting of selectors and etc.)
- To watch for 4096 selector limit in IE9.
This plugin requires Grunt.
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-css-count --save-devtest/style.css
Selectors: 17 | Declr: 16 | Rules: 11 | S/R: 1.5 | D/R: 1.5 || 1k (1k gzip)
| D1: 7 (41%) | D2: 3 (18%) | D3: 4 (24%) | D4: 2 (12%) | D6: 1 (6%) || * 4
Line 1: Location of the CSS file being counted.
Line 2: General statistics and size of file.
S/R: selectors to rules ratio D/R: declarations to rules ratio
Line 3: Depth of selectors (nesting count) and number of used global CSS selectors (*).
Nesting depth explanation:
D1:
.selector-1 { ... }
D2:
.selector-1 .selector-2 { ... }
D3:
.selector-1 .selector-2 .selector-3 { ... }
...
Example of a Grunt config (Gruntfile.js) containing the csscount task.
grunt.initConfig({
csscount: {
dev: {
src: [
'css/compiled/styles.css',
'assets/styles/*.min.css'
],
options: {
maxSelectors: 4000,
maxSelectorDepth: 5
}
}
}
});
grunt.loadNpmTasks('grunt-css-count');
grunt.registerTask('default', ['csscount']);Type: Number
Default: ∞
Maximum number of selectors within CSS file. (IE9 limit is 4096)
Type: Number
Default: ∞
Maximum depth (nesting) within selectors.
Type: Boolean
Default: false
Whether Grunt to fail or not on 'maxSelectors' and 'maxSelectorDepth' errors.
- @visionmedia for the great css-parse library.
- Original work from @phamann's grunt-css-metrics