Most of us assume CSS optimisation is a solved problem. Run a minifier, switch on compression at the server, and move on. Yet CSS keeps gaining new features at a remarkable pace, and it would be surprising if every opportunity to trim a stylesheet had already been squeezed out.
One long-standing idea has quietly resurfaced: writing each declaration only once. The approach, sometimes shortened to UDJO (“using declarations just once”), has been around for well over a decade. Fresh testing across dozens of live websites suggests it still has something to offer, provided it is applied with a little care.
What “Declarations Just Once” Actually Means
The thinking borrows from the familiar programming rule of not repeating yourself. Instead of writing the same property and value inside several different rules, you write it a single time and attach every selector that needs it.
Imagine a stylesheet where a card, a toolbar and a footer row all set justify-content: space-between in their own rules. Under this approach, that single declaration would live in one rule, with all three selectors grouped in front of it. Change the value there and every component follows.
That brings two potential wins:
- Maintainability – shared styling is defined in one place, so it is harder for components to drift out of step.
- Smaller files – fewer repeated declarations can mean fewer bytes sent to the browser.
The Catch: Selectors Cost Bytes Too
Grouping is not free. Every time a declaration is pulled into a shared rule, the selectors that use it have to be written out again in front of it. If those selectors are long (think deeply nested class chains generated by a framework or page builder), the extra selector text can easily outweigh the declaration you saved.
There is also the cascade to think about. Moving a declaration into a different rule changes where it sits in the stylesheet, and in CSS, order matters. A deduplication that looks tidy on paper can quietly change which style wins when two rules compete. Only changes that are provably safe should be made automatically.
Putting It to the Test on Real Websites
To see whether the technique is still worth the effort, the external stylesheets of 20 organisation websites were run through an automated deduplication tool. Two passes were compared:
- A straightforward pass that merged every repeated declaration it judged safe to move.
- A more selective pass that went further with changes that were probably safe, but only kept those that actually made the file smaller.
The results were striking. Every single site had repeated declarations that could be consolidated. However, in 18 of the 20 cases the straightforward pass made the stylesheet bigger, in some cases by more than a quarter, because the repeated selectors added more than the removed declarations saved.
The selective pass told a different story. All 20 sites ended up with smaller CSS, with reductions ranging from a fraction of a per cent up to around 7%.
How Developer Sites Compare
A second, smaller sample looked at ten personal websites belonging to well-known front-end developers. Again, every site had some repetition that could be removed. This time only half of them grew under the straightforward pass, compared with 90% of the organisation sites, and the selective pass shrank all ten, with the best result trimming roughly 11% from the stylesheet.
The likely explanation is selector length. Hand-crafted stylesheets tend to use short, simple selectors, which makes grouping cheap. Large organisational sites, often built on themes, plugins and frameworks, carry long selectors that make naive merging expensive.
It is worth noting what these figures do not measure. They say nothing about overall code quality, and they were taken before gzip or Brotli compression, which already does a good job of shrinking repeated text. Real-world transfer savings will therefore be smaller than the raw numbers suggest.
What This Means for Business Websites
For a typical small business site running on WordPress with a page builder, the stylesheet is often the product of several themes and plugins layered on top of each other. That is exactly the kind of CSS where blind deduplication backfires, but also where a careful, size-aware approach can still find savings.
A few per cent off a stylesheet will not transform a slow website on its own. It does, however, sit nicely alongside the bigger wins: removing unused CSS, loading only what each page needs, compressing images and choosing good hosting. Every kilobyte the browser does not have to download and parse helps pages appear faster, especially on mobile connections.
Key Takeaways
- Writing each CSS declaration once remains a valid optimisation technique, and every site tested had repetition to remove.
- Merging repeated declarations blindly often makes files larger, because long selectors get repeated instead.
- Applying it selectively, keeping only changes that reduce file size, produced smaller stylesheets on every site tested.
- Short, simple selectors make the technique far more effective.
- Always test changes carefully, as moving declarations can alter the cascade.
- Compression already narrows the gap, so treat this as a fine-tuning step rather than a headline fix.
CSS optimisation clearly has not hit its ceiling. If your website feels sluggish or its stylesheets have grown unwieldy over the years, a tidy-up that combines deduplication with removing unused code is a sensible, low-risk place to start, and it is exactly the kind of behind-the-scenes work that keeps a site quick and easy to maintain.
