CSS optimization
In this lesson, we will discuss something many designers and developers find challenging to master. I guess it is a love-or-hate relationship because some seem to love it, while others hate it. Those who love it will master it or at least become very familiar with it, and those who hate it will never get a grasp. The thing we are going to talk about is CSS and not just CSS in general terms. In this lesson, we will zoom in on optimization, frameworks, libraries, animations, compression, and reusable components. CSS, also called Cascading Style Sheets, is an important part of modern web design; frankly, you won’t get far without it. Do you remember back in the days when websites didn’t contain anything but text and maybe a colored background? That is how far you can get in web design if you don’t familiarize yourself with CSS.
As a programming language, it is different from many others. I know many will disagree with me here and say that it isn’t an actual programming language, but the fact is that it is. Just because it is different from others doesn’t mean that it doesn’t categorize as a programming language. Its structure is different from every other language, and it is honestly the only one where I have seen a single file containing more than 10,000 lines of code.
Yes, you read correctly; I work with projects with stylesheets containing more than 10,000 lines of self-written code. Navigating these files is easier than you might think, but I highly doubt all the styles are being used. Some might be leftovers from previous years, and some might be from removed elements. Finding the ins and outs is easy, but knowing what should be kept and removed is hard. This is why optimization is important, so let’s dig in to get started on the topic.
Why do we optimize CSS?
If you have tried writing custom CSS for bigger projects, then you know the struggle of maintaining thousands of lines of styles. If you still haven’t tried it… Don’t worry; you don’t have anything to look forward to. Jokes aside. Maintaining large CSS files can be a struggle because every time the smallest thing on your website changes, you have to update the stylesheet. But it is not always that we, as designers, do it. It might be out of laziness or maybe because of time constraints. When things have to go fast, we can forget, and then we suddenly have unused styles left in our sheet. Unused code weighs down the stylesheet, and for every character you write, you increase the weight of your file and the time it takes for the web browser to process your styles and apply them. Imagine for a moment that you are reading one of those smart book summaries that tells you the most important parts of a book.
This is how the web browser will interpret optimized CSS, and if your stylesheet is full of unused code and comments, it will be like reading the whole book. You will process lots of information, but in the end, you will come out with the same knowledge as if you read the summary. The difference is that reading the book took ten times longer than reading the summary. You don’t want that for your website. You want a lean, minified file only containing styles used by your website, which is why we optimize CSS.
We optimize for many reasons, but some of the biggest ones are
Optimized CSS results in a smaller file.
Devices use less processing power while loading the stylesheet.
The file will become easier to maintain.
The file will contain less code.
An optimized stylesheet will result in a faster website.
An optimized stylesheet pollutes less than a heavy one.
Single stylesheet or scoped CSS?
Whether it is best to use a single stylesheet or a scoped CSS feels like the talk about the chicken or the egg. Which one came first? There are obvious benefits to using both methods, but let’s try to list some of them. Each one carries benefits, and it can be hard to determine your choice.
Single stylesheet
A single stylesheet is what most designers and developers go with. It is also easier in many ways compared to using scoped CSS, but is it the best? I will let the answer be up to you.
