How Much CSS Is Too Much?

Here’s the situation: You’re developing a website or web application. And as you looked at the number of lines in your CSS stylesheet, you found yourself wondering how much CSS is too much.

It would be so easy to say “this much,” and then move on. But you and I both know that in web development, the answer is never really that simple. That is, a CSS style sheet that’s too big for a simple website might not even have a tenth of the CSS rules needed for a large project.

The real question we should be asking ourselves here is, how can you tell how much CSS is too much?

So let’s get into it.

It’s Not How Much CSS You Have; It’s How Well It’s Written

Years ago, web development seemed like the easiest job in the world.

All you had to do was learn a little HTML and CSS and then start packing line after line of HTML markup and CSS style sheets into static files with no regard to performance.

This is no longer the case today. Users, who do most of their browsing on their phones, expect websites to load completely in a few seconds—and they’re quick to leave any website that doesn’t meet their expectations.

Since the page experience update in June 2021, Google takes the page speed of your website into account when ranking it in its search engine results pages (SERPs).

This means that as a web developer, it’s no longer enough to write CSS.

You need to write performant CSS.

There is no rule of thumb for the total number of lines or the total file size of your CSS style sheet. If you get advice from anyone who tries to tell you otherwise, take it with a grain of salt.

Writing your CSS from scratch vs. using a CSS framework

This is probably the most impactful decision you will have to make when it comes to the size and performance of your CSS style sheet.

You can ship your website or web application much faster if you use a CSS framework like Bootstrap or Foundation. But these frameworks come with all sorts of bells and whistles, so you will end up with a lot of bloat for features you’re not using.

Or you can write all the CSS code for your project from scratch. Chances are you won’t end up with redundant code, but—depending on how you approach it—you can still get it right or wrong when it comes to your site’s page speed.

Read on, and we’ll get to the reasons why in a moment.

Making your CSS style sheets performant

Whether you’re using a CSS framework or coding your site from scratch, there are a number of things you can do to make your CSS files more performant.

The key is to remember that CSS files are render-blocking and to optimize with this fact in mind.

Before the browser can display a web page to the user, it must request, download, and parse the HTML files, CSS style sheets, and synchronous JS scripts.

If the user’s Internet connection is slow, your server’s response times are not fast, and your CSS style sheets are rather large, the browser will take a long time to render the page.

Here’s how to make your CSS style sheets performant:

• Use a good host and Content Delivery Network (CDN).
• Activate gzip compression and enable connections through the HTTP/2 protocol on your web server.
• Keep your CSS style sheets free of redundant and overlapping rules. Analyze your CSS files for unused rules frequently and remove them.
• Extract the critical CSS rules needed to render the above-the-fold content on your web page, then embed it or inline it in the DOM elements of your HTML document.
• Separate the desktop, mobile, and print style sheets into their own CSS files to reduce the time it takes to render a page on each medium.
• Use the font-display property to tell browsers to use a fallback font until your web fonts are fully loaded.
• Move CSS animations off of the main thread by animating with CSS properties that lean on the GPU.
• Avoid referencing external resources with the CSS @import rule.
• Minify your production website’s CSS style sheets.

The Bottom Line

Yes, it’s important to keep your CSS code compact and, as your project evolves over time, remove unused CSS rules from your style sheets.

But CSS performance isn’t in the total number of lines in your style sheets nor their total size; it’s in the way they’re written and incorporated into the website or web application.

It’s important to look at website performance holistically rather than piecemeal. Your CDN, host, source code, and technical architecture need to be set up in a way that makes the whole greater than the sum of its parts.

And CSS, at the end of the day, is just a part of it.