Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS Performance: We write CSS selectors wrong!

CSS Performance: We write CSS selectors wrong!

So today, I want to dive into CSS Performance. Especially I want to talk about, how you can make you selectors faster to render in the browser. So let's start with an example that every (Frontend) Webdeveloper used once in CSS.

HTML structure

So imagine that you have this html structure:

<nav class="main-navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Blog</a></li>
    </ul>
</nav>

CSS selectors

And beside that you have this in your stylesheet:

nav {
    height: 60px;
    max-width: 1024px;
}
nav ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
nav ul li {
    display: inline;
}
nav ul li a {
    display: inline-block;
    padding: .5em 1em;
}

Analysing the HTML & CSS

If you check the HTML & CSS, this is something a lot developers will use in there websites/webapps. Nothing special! Just a styling for your main navigation.

Right to Left

"One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a the first thing thing interpreted is a. This first part is also referred to as the "key selector" in that ultimately, it is the element being selected."
    Source: [CSS-tricks.com](https://css-tricks.com/efficiently-rendering-css/)

Browsers read selectors right-to-left

Huh? What? Are you kidding me? Yeah, browsers don't read your selectors from left-to-right!

So with a selector like "nav ul li a" the browser start to search to a "a" tag in the whole page, after that it will filter it to every "a" tag inside an "li" tag, and so on. You understand this will take more time than needed!

What selectors are better and faster to use

If these selectors, most of the developers are using are not so efficient as we thought, what should we use than? Let me introduce to you the "BEM" methodology! BEM stands for "Block, Element, Modifier" and helps you to get much better selectors & class names in the HTML and CSS. In this blogpost of Sitepoint it is really good explained how to use BEM http://www.sitepoint.com/bem-smacss-advice-from-developers/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment