gulp-css-count

Count CSS selectors, declarations and rules in CSS files.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
gulp-css-count
101.0.0a year ago7 years agoMinified + gzip package size for gulp-css-count in KB

Readme

Count CSS selectors, nesting depth, declarations and rules in CSS files.
  • To monitor simplicity of CSS files (depth/nesting of selectors and etc.)

Getting Started

This plugin requires Gulp. You may install the plugin with this command:
npm install gulp-css-count --save-dev

Sample Output

/var/www/html/site/style.css 32.05 kB
Selectors: 17 | Declr: 16 | Rules: 11 | S/R: 1.5 | D/R: 1.5
D1: 7 (41%) | D2: 3 (18%) | D3: 4 (24%) | D4: 2 (12%) | * 4

Line 1: Location and size of the CSS file being counted.
Line 2: General statistics of the 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

Gulp 3 config (gulpfile.js) containing the css-count task. Gulp 4 one is similar.
var gulp = require('gulp');
var gulp_css_count = require('gulp-css-count');

gulp.task('csscount', function() {
  return gulp.src('./css/**/*.css')
    .pipe(gulp_css_count());
});

Credits