Javi Javier

Finding Patterns in CSS

You can try this project out at https://csspatterns.j4vi.com/.

When a practice is already widespread among authors, consider adopting it rather than forbidding it or inventing something new

A lot of my bad CSS has grown out of the fear of long-used large CSS. People have lost confidence in its orderliness and instead keep it going by constantly adding and fighting the specificity war. Most likely though, in spite of the underlying disorder, the design appears to have a system. I wondered if these patterns existed in the code and can be pulled out?

This tool identifies if there are clusters of declarations that recur in your CSS. For example it could point out that

font-family: sans-serif;
font-size: 1.2rem;
line-height: 1.5;
margin: 1em;

Occurs in 5 different places with 8 different selectors.

This could just be showing that you’re using mixins or extends consistently.

But it could also:

  1. Help you make those mixins if you didn’t have them
  2. Point out that in 4 of those 5, you’re also using text-transform: uppercase so you can add it to your mixin
  3. Help you reorganize your cascade if the selectors have something in common

This tool converts CSS to an AST. It then generates combinations of four (seemed to be a meaningful size, but will allow tweaking of this later) declarations per rule-set. It then tallies how frequently each generated combination occurs.