Guide to Writing Efficient CSS

Writing efficient CSS is incredibly important. Today's internet users have very short attention spans, so the longer your site takes to load, the higher the chances they'll hit the back button.

If you're building a simple website, efficient CSS doesn't matter that much. But such websites are more and more rare. If you're building a large and complex site, you should be concerned with the efficiency of your CSS.

Below we highlight why efficient CSS is important, how to write more efficient selectors, and offer some tools that can help you further optimize your code.

Why Efficient CSS Matters

Not taking CSS efficiency into account when writing your code can seriously harm the overall performance of your page. And the last thing you want is to have a slow loading website.

Your goal is to make it as easy as possible for the browser to render your code — even browsers that run less efficiently.

There have been arguments made that's it's not the job of the author to worry about optimizing selectors, it should be the job of the engine that's compiling the code. Although this is true to a certain extent, not every user is going to be using a modern browser.

There are still users all over the world who only have access to older computers and browsers. You'd hate to penalize those users, just because they don't have access to the latest technology. Maybe in time, this will change.

But, having your users in mind when you're writing code is always a good idea.

Selectors Are The Most Important

One of the most important aspects of writing efficient CSS is understanding how browsers read and compile it. The big thing to understand is that they read from right to left.

It begins with the key selector and moves to the left to look for the ancestors in the rule's selector. Then, it continues to move left until the rule is completed, or it results in a mismatch.

So, if your code reads ul > li a img, then the first thing that'll be interpreted is a img.

The key selector is the last part that we've assigned to the end of the selector.

Four Types of CSS Selectors

There are four main types of CSS selectors that you need to be aware of and use the right way for your CSS code to be efficient. The selectors below are ordered in terms of their efficiency. Those at the top are the most efficient, and the bottom the least.

ID Selector

The ID selector refers to a specific HTML element using the ID attribute, and looks like the following:

#main-navigation { }

In the HTML, this would be used as follows:

<div id="main-navigation"> 
... 
</div>

Class Selector

The class selector will select elements within a specific class attribution, and looks like the following:

.center { }

In the HTML, this would be used as follows:

<p class="center"> 
... 
</p>

Tag Selector

Tag selectors are less efficient than IDs and classes, so they should be used sparingly. But they can still be effective in the right circumstances. Tag selectors generally look like this:

ul { }

In the HTML, the tag will simply be styled as dictated by the CSS whenever the tag is used (ul in this case).

Universal Selector

The universal selector can be applied to any element within your document. To write efficient CSS you should avoid using the universal selector whenever possible. The universal selector is designated by the following:

* { }

Efficient CSS Rules To Keep In Mind

There are a few key rules to keep in mind that will help you write more efficient CSS. By taking these rules to heart your CSS code will load much faster and perform better across every web browser around.

Do Not Use Descendant Selectors

A descendant selector is any two selectors that aren't separated by a combinator. The descendant selector is the least efficient selector, and can really have a negative impact on performance.

Some example of descendant selectors you shouldn't be using, include:

header h3 { }

footer p { }

.body div { }

Don't Tag-Qualify IDs

Since IDs can refer to only a single element, it makes no sense to qualify them with the specific tag they will be used with. For example,

li#left-navigation { }

It isn't necessary to tell the browser what tag the selector will be applied to. Instead, this is more efficient:

#left-navigation { }

Note that the same thing is true of classes, but to a lesser extent. So don't qualify classes either.

Use CSS Inheritance as Much as Possible

Property inheritance is an important thing to master. Learn which properties will get passed down from element to element, and let them do their job.

For example, font-size is inherited. So if you set it for the body of the document, it isn't necessary to set it for the p and li tags.

Limit Your Rules

Adding too many rules to your tags will slow down your CSS code, and greatly complicate the matching process.

For example

body .widget-left #widget { }

This is poor code. There is just too much going on. On the other hand:

#widget { }

.widget-left { }

These are much more efficient.

Implementing the above tips will help to make your CSS code much more efficient. If you're looking to test your code or find even more ways to make it efficient, then check out some of the tools highlighted below.

Tools to Improve Your CSS

If you keep the above rules in mind your CSS code will be much more efficient.

But, if you're looking to optimize your CSS code even further, there are tools that will help you get there. Below we profile a few tools that will help to compress your CSS, define selectors, and even create your IDs for you.

  • CSS Stress Testing: this is cool in that it makes micro-adjustments to your site, like scrolling, zooming, resizing, and more. Plus, it does all of this in under 30 seconds. It then sends you a report about the effectiveness of your CSS.

  • Define CSS IDs: the web pack CSS loader is a very useful tool. It can help to specify classes and IDs, and can even do some CSS optimization for you.

  • Reduce Your CSS Selectors: this shows all of the CSS selectors currently in place along with which elements selectors are using. This allows you to reduce the number of selectors you're using, so you can reduce your overall memory load. With this tool you can plug in any URL, so you can also study other sites.

  • Shrink Your CSS Code: shrink your existing CSS code. The less code you have to compile the better. It provides a "before" and "after" screenshot, so you can see the changes this tool made.

  • Compress Your CSS Files: gzipping your CSS files will help to clean it up. Thus, it can help to reduce the overall size of the HTTP response and thus the server response time.

Conclusion

Whether or not you choose to optimize your CSS is up to you. It's not completely necessary with today's modern browsers. However, if you are creating a complicated site, it is well worth doing.

What's more, you still may have users who have older setups and it's a smart idea to cater to their needs too. Hopefully, the guide above will help you do just that and write more efficient CSS.