How It Started
Last year I took a masterclass on finding clients by Paul Boag. I never got to the final lesson, but one particular advice stuck with me: you should combine your passion with your profession. So I started thinking about combining sports, my passion, and front-end development, to be more precise, CSS, my profession. Since I enjoy writing CSS and exploring it and finding new ways to use it more efficiently, I got the idea of starting a site about auditing CSS. I presented the idea to my friend, and here we are now, providing our first report.
About CSS Audit
CSS auditing is not a very popular topic, but we find it very important. Although there are some excellent tools and resources, we don’t think those are widespread enough. One of the aims of CSS Auditors is to try to change that. We want to bring attention to CSS and all aspects of writing quality CSS code. After all, every site on earth uses CSS, with very few exceptions like this one.
Wikipedia has this definition for code audit:
A software code audit is a comprehensive analysis of source code in a programming project with the intent of discovering bugs, security breaches or violations of programming conventions.
CSS is a very forgiving language in terms of errors. The reason is that browsers usually skip the line that produces the error while the rest of the code remains valid. There are linters and other tools that could prevent those issues. Still, they cannot prevent developers from writing inadequate CSS. That is why we would like to add CSS code quality to this definition.
About CSS Quality
With abstract terms, like quality, it is almost impossible to determine the formula or calculation. How would you define code quality, in particular, CSS code quality? We asked this question in several places, including dev.to and some Slack communities. Here are some of the answers:
As some of the previous answers mention:
- Low specificity selectors
- Component-based styles
— Spyros
If the css is modular, reusable and scalable.
How large the custom stylesheet is in terms of file-size.
Use of external css frameworks like Bootstrap or Foundation.
For large projects, if a preprocessor like Sass or Less is being implemented with properly organized functions, mixins, variables, etc.
— Matt
- Usage of low/high specificity selectors.
- Styles with less noise
- Readable styles (is readable top to bottom)
Forgotten that !important still exists.
— Joshua
Readability, structure, good use of variables and consistency. The bigger the project, the more important these are to me. Also the lack of exceptions although this might be more of a bad design practice...
— Sjoerd
- No bootstrap
- Mostly max 3 selectors ( in case of sass, 3 levels of nesting )
- Dry
- Ordered declarations
- Use of not, >, +, ~
- Comments
- Naming of classes (understandable)
- Reduced motion, outline not 0, etc. (Accessibility)
- Animation
- Transform
- No backend developer code
— Kris
- Performance considerations. e.g. using will-change property when animating.
- Considered use of when to animate with CSS vs JS
- Consistent coding patterns e.g. always use shorthand where appropriate.
- Other things I’d look at have already been mentioned.
— Azlan
There seems to be no answer to what CSS code quality implies. Everyone’s answer is different and it depends on various aspects.
The Very First Audit Report
One of the first thing that comes to mind when thinking about the quality of the code is file size. That is exactly what we did in our first report – we audited the CSS code of all Premier League sites. This is the part where I managed to include my passion, sports, into the project.
The full report is available here. I don’t want to write any spoilers, so I will leave you to read it thoroughly.
To be able to make this report, we needed information. So the first step was to extract the CSS code from these sites. We used wappalyzer and extract-css-core, both excellent tools. We didn’t want to make calculations manually since we wanted to reuse the script to audit other sites, so we wrote a script for calculations and graphs. Finally, we needed to make the report look appealing. This is definitively the part that could use more love, but we wanted to release the report as soon as possible.
The Conclusion
We hope this report will encourage you to think about your CSS code’s size and the quality of CSS in general.
That is the final goal of CSS Auditors; we want to make every developer respect CSS.
#RespectCSS
Top comments (2)
The report was interesting, I am actually trying to work out how you can have 3mb of CSS, it just doesn't seem possible! lol
Good luck with the project, I imagine it will be a nightmare to analyse anything other than file size! 🤣
Also I think you will have to become opinionated about what is a good and bad practice to make this work.
Burnley is a prime example - is it good that they inlined all of their CSS? Due the size of it it works fine but if the CSS was larger would it still be fine as they are wasting bytes on every subsequent page load (as well as initial page load as they should only inline critical CSS not everything!)
Then should they be penalised on the second page I visit as they are having to push the CSS down the wire as part of the HTML instead of from my local cache (increasing the weight of every page)?
I hope your project grows into a useful tool for everyone, combining the power of a CSS linter with a file size checker and some sort of clever algorithm to check specificity is appropriate for a page design, without hampering productivity too much!
Couple of suggestions to add to your rules list:
!importantas that is a serious "code smell".Anyway, if the project progresses to something where you need testers, input etc. I am happy to help!
respectCSS and totally agree React and other JS frameworks are DUMB, when it comes about breaking websites and over complicating things that shouldnt be complicated