A quick CSS audit script for finding overly long/specific selectors in CSS files

index.js

#!/usr/bin/env node

// This is a quick CSS audit script I wrote for finding overly long/specific selectors in CSS files.
// Usage: Download this file, then run:
// $ npx https://gist.github.com/mortenson/628fd527a25efe4fd1a4940e14c31066 <space separated list of CSS files to audit>

const listSelectors = require('list-selectors');
const { calculate, compare } = require('specificity');

// This is useful if you want to anonymize the results to avoid blaming.
const redactedMode = false;

const redact = (string) => {
  return string.replace(/[a-zA-Z]/g, () => {
    return String.fromCharCode(97 + Math.floor(Math.random() * 26));
  });
};

listSelectors(
    process.argv.slice(2),
    { include: ['ids', 'selectors'] },
    (myList) => {
      let longCount = 0;
      let idCount = 0;
      const longest = [...myList.selectors].sort((a, b) => {
        return b.replace(/[^\s]/g, '').length - a.replace(/[^\s]/g, '').length;
      });
      const moreSpecific = [...myList.selectors].sort((a, b) => {
        return compare(b, a);
      });
      myList.selectors.forEach(function (selector) {
        if (selector.replace(/[^\s]/g, '').length > 4) {
          longCount++;
        }
        if (selector.match(/#/)) {
          idCount++;
        }
      });
      console.log('Deepest selectors:');
      longest.slice(0, 10).forEach((selector) => {
        if (redactedMode) {
          selector = redact(selector);
        }
        console.log(selector);
      });
      console.log();
      console.log(`Number of selectors with over four descendants: ${longCount} (${Math.floor(longCount/myList.selectors.length * 100)}%)`);
      console.log();
      console.log('Top selector specificity (id,class,element):');
      moreSpecific.slice(0, 10).forEach((selector) => {
        if (redactedMode) {
          selector = redact(selector);
        }
        console.log(calculate(selector)[0].specificityArray.slice(1).join(',') + `: ${selector}`);
      });
      console.log();
      console.log(`Number of times HTML IDs are used: ${idCount} (${Math.floor(idCount/myList.selectors.length * 100)}%)`);
      console.log(`Number of unique HTML IDs used: ${myList.ids.length}`);
    }
);

package.json

{
  "name": "css-audit",
  "version": "0.0.1",
  "bin": "./index.js",
  "dependencies": {
    "list-selectors": "^2.0.0",
    "specificity": "^0.4.1"
  }
}