Development & Design
How Modern CSS Quietly Made Most Frameworks Optional
There was a good, honest reason developers reached for CSS frameworks for the better part of a decade. Plain CSS, for all its ubiquity, genuinely could not do…
Open source · Node.js
Numbers that tell you when your CSS is getting away from you.
StyleStats parses any HTML or CSS document and produces a small set of metrics — selectors, colors, font sizes, cohesion, !important usage — that act as an early warning system for stylesheet complexity.
# install
$ npm install -g stylestats
# run
$ stylestats path/to/file.css
→ Total Stylesheets: 1
→ Selectors: 245
→ Unique Colors: 23
→ !important Keywords: 4
View test results for popular sites
Sample reports we keep on file — pick one to see the metrics.
#
Quantify complexity
Count selectors, unique colors, font sizes, and float properties — the signals that drift first.
∑
Track cohesion
Average and lowest cohesion scores reveal selectors that try to do too much at once.
⌥
Catch !important drift
Spot specificity wars before they become impossible to untangle.
From the blog
Articles on CSS, design systems, and front-end craft.
Packages
The Performance Budget That Keeps Complex Web Apps Fast
Every ambitious web interface faces the same slow tragedy. It launches lean and fast. Then features are added, a library here, a widget there, another tracking…
Development & Design
Why Your CSS Bundle Is So Big and How to Shrink It
Almost every mature project reaches the same uncomfortable moment. Someone finally looks at the size of the CSS being shipped to visitors and is quietly horrif…
Development & Design
Container Queries and the End of the Media Query Era
For two decades, responsive web design rested on a single technique: the media query. It was the tool that let websites adapt to different screen sizes, and it…
Development & Design
The Unused CSS Problem and Why Dead Styles Keep Piling Up
Every stylesheet accumulates ghosts. Rules written for a component that no longer exists, overrides for a layout that was redesigned two years ago, colours def…
Development & Design
The Design Tokens That Hold a Growing Stylesheet Together
Every stylesheet starts clean. The colours are consistent, the spacing is deliberate, the type scale makes sense. Then the project grows, contributors come and…