Using CSS can make your web development life easier. In this blog post, we present a little guide on how to write the most efficient and simple CSS for your projects.
Note that this is just a little help to point you in the right direction, not a rule set in stone.
How to Write Well Performing CSS
Modern web browsers can render an HTML document increasingly faster, but that still doesn’t mean you shouldn’t bother about the website code. This is also true with regard to selecting elements in CSS by means of selectors. Not every selector can access its element in the document structure equally fast.
Do without Combinators If Possible
Without getting too specific here, it can be stated that the simple selectors are usually more efficient than a mixture of multiple selectors with combinators. For example, take a look at the following CSS rule:
.myarticle a { color: gray; }
Here, .myarticle a{...} was used as the descendant combinator. The fact that this selector is slower is due to the way the web browser processes it. If the web browser were to read the document tree from left to right, it would first look for all elements that use the myarticle class and then all a elements that are a child of it.
But now the web browser reads from right to left and first looks for all a elements; it’s not until after that does it look if there’s a matching parent element with the myarticle class. For a website with multiple hyperlinks, the web browser would first search for all a elements and then filter out again the matching a elements that are contained in elements with the myarticle class. In that case, it’s absolutely unnecessary to select all a elements of a website. So, what’s wrong with giving the a elements in the HTML documents directly a class (e.g., <a class="myarticle_a">), which you can then access using a class selector such as .myarticle_a { color: gray; }?
We don’t mean to disparage the combinators here, as using them for concatenation purposes is extremely powerful, and you can use them to quickly and conveniently style the desired element. However, the descendant combinator is often used unnecessarily in practice. You should use these combinators with a little more care because the web browser has to resolve long and complex combinators first, and this costs the web browser response time when rendering the website.
Admittedly, the selector performance of modern web browsers is pretty good, and some might argue that optimization doesn’t play too much of a role here anymore. Nevertheless, sometimes with some thought, you can use a shorter and simpler selector to get where you want to go. Here’s another negative example of multiple concatenation of selectors using the descendant combinator:
.linklist ul li a { color: green; }
Here you’re looking for all a elements located in a li element, which in turn is located in a ul element whose parent element contains the .linklist class, just to put green font color on it. That’s quite some work to be done by the web browser! You could have also written the following:
.linklist a { color: green; }
This also depends on the HTML document. If there’s another ordered list in the HTML document containing an ol element that also contains li elements with a elements in it, you’d have to be more specific, or—even simpler—you could formulate two corresponding classes for it:
.linklist-ul { color: green; }
.linklist-ol { color: red; }
These optimizations depend on the web project and can’t be generalized here. It’s just important to think a bit before you implement CSS rules with deeply nested selectors using combinators because there could be an easier way.
Selectors That Don’t Make Sense
Selectors are also often used that don’t make any sense, which can be avoided with consideration. Here’s an example:
.myarticle #special a { color: gray; }
In this case, you can safely do without the class myarticle because an ID selector can only occur once in an HTML document anyway. Consequently, the example can be simplified as follows:
#special a { color: gray; }
However, again, we don’t like the fact that all a elements on the website are searched for first, only to be filtered out again in the element with the ID special. Again, I’d recommend simplifying this and just using a class selector instead:
.special_a { color: gray; }
Attention with the Universal Selector
It’s probably unnecessary to mention that you should use the universal selector * only in an emergency. After all, this selector selects all elements of an HTML document. Such a negative example could look like the following:
#special * { color: black; }
Because of the universal selector, all elements of the entire HTML document are searched, and only then are all elements located in #special.
But Does It Matter That Much?
Considering the performance of modern web browsers and computers today, some may say that it doesn’t matter if the CSS code is fast or not. Unless you’re using a website with thousands of elements, the web browser will barely bat an eye when loading a website with inefficient CSS code, and you probably won’t notice those few extra milliseconds it takes for the website to load. At this point, one could discuss whether CSS contributes much or little to the loading time of the website.
Recommendation: Keep the CSS Code as Simple as Possible
You still have a guaranteed advantage if you write more efficient CSS: the code will be much neater and simpler in the process, and at the latest when you need to make subsequent changes, you’ll be glad you wrote proper CSS. Not only do more precise specifications with multiple selectors act as brakes for the web browser, but they also often lead to more complex CSS, which you then feel in the negative sense when you want to override a specification. In addition, using a type selector such as h1, p, or a alone is often too imprecise and can entail problems when you want to style more-specific elements with additional classes because there are different weightings here.
For this reason, here’s a useful recommendation: work with CSS classes! First of all, this gives you a neat and easy-to-edit CSS, and, secondly, you usually don’t have to bother about performance issues—killing two birds with one stone. Of course, this doesn’t mean that you have to work exclusively with CSS classes, as there are definitely cases where it makes sense to resort to special selectors or combinations. However, if you pay a little more specific attention to this before creating your website, you should never have much trouble understanding your CSS code after a long time has passed.
Editor’s note: This post has been adapted from a section of the book HTML and CSS: The Comprehensive Guide by Jürgen Wolf.
Comments