DEV Community

Cover image for How do you analyze your CSS?
Silvestar Bistrović
Silvestar Bistrović

Posted on

How do you analyze your CSS?

Recently I posted a question on Twitter:

Hi developers!
I wanted to ask you a question about #CSS.

1) Do you test your CSS? How do you do it?
2) If not, why not?

I often use Specificity Visualiser for comparing versions.

And recently CSS Stats tool:

Any suggestions?

— Silvestar Bistrović (@malimirkeccita) July 11, 2019

I got only one response, but it was significant. Bart Veneman posted his tools for CSS analysis. It was a great discovery for me. I am playing with these tools ever since, and I am trying to learn new ways to analyze my CSS files.

Before this, I often used CSS Stats to see the performance of my CSS, and Specificity Visualizer to see the specificity graph.

CSS is still a very underrated part of the web technology stack. Tools like these are the right step in bringing attention to the importance of the efficient and performant CSS code.

Do you know of any other tool? How do you use it? What in particular, are you looking for in these analyses?

Top comments (2)

piyukore06 profile image
Priyanka Kore

We use stylelint to lint our CSS. There's isn't any explicit style testing. But for important components e2e tests with cypress (But I guess that's more about after interactions, like if some element is active etc..)

starbist profile image
Silvestar Bistrović

I am using stylelint, too. It is a great tool, but it doesn't fit the analysis part.
Back in the day I have used regression test, but it wasn't cypress.
Thanks for the comment, though.