DEV Community


Discussion on: The Very First CSS Report About CSS File Sizes and File Count

inhuofficial profile image

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:

  • Massive point reduction for use of !important as that is a serious "code smell".
  • inline styles (not within style tags) should also contain massive penalties if they are not added with JS.
  • Media queries on external style sheets declarations so only relevant ones are loaded for current screen size.
  • Minification - somehow nobody seemed to mention combining and minifying files, the biggest quick win for nearly every site!
  • Fallbacks for IE - IE still has a large enough share to worry about on very large sites, doesn't have to be pixel perfect just some styling exists that works on older tech.
  • Critical CSS analysis - similar to Lighthouse where it checks all styles required to render "above the fold" are present.

Anyway, if the project progresses to something where you need testers, input etc. I am happy to help!