Fat Agnus

First, let’s see how the style system works.

“The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.” – David Hyatt

When I first read this, I got one of those Aha! Moments, because I always thought that CSS selectors was interpreted left to right.

1

#foobar a { color: black; }

If we take our example from above, this would mean that instead of just checking for anchor elements inside foobar, the browser will lookup all anchors in the page. Instead of just checking each anchor’s parent, the browser will crawl the document tree, trying to find an ancestor with the ID foobar and it will continue up the tree of ancestors until it reaches the document root.

These guidelines was put forward by David Hyatt, a Safari and WebKit architect.

Avoid universal rules

It is recommended that you use ID, class and tag selectors.

Don’t qualify ID-categorized rules with tag names or classes

Since there can only be one element in the page with a given ID, there is no need to add extra qualifiers.

1
2

NO – div#foobar
YES  - #foobar

Don’t qualify class –categorized rules with tag names

Instead of qualifying class selectors for specific tags, extend the class name to be specific to the use case.

1
2

NO – div.foobar
YES - .foobar

Try to put rules into the most specific category you can

Don’t be tempted to build long selectors, because it can be the biggest slowdown in the system. It is better to be specific and add a class to the appropriate elements.

1
2

NO – ul li a
YES – .list-anchor

Avoid descendant selectors

Watch out for this one, this is really an expensive operation and should be avoided. This can often be replaced with a child selector.

Avoid tag-child selectors

Don’t use a child selector that is based on a tag, it is better to use a class that is associated with the tag; this can really improve the matching time.

1
2

NO - #foobar > li > a
YES - .foobar-anchor

Question all usages of the child selector

In general you should be careful about the child selector and it would be a good idea to avoid them.

Rely on inheritance

Learn which properties are inherited, and avoid rules that specify these inherited styles.

Should I use them?

Well, the answer is; it depends. First you need to be sure that you are focusing on the right problem. Not all pages will be affected, it basically comes down too how much stuff you put into it. The more complex, the greater the chance is that your page will be slowed down significantly (a couple of seconds).

Second, not all complex selectors affect performance, because it comes down to the key selector, the rightmost argument.

Consider this

1

Div div div a.myclass {…}

This can be ok, because our key selector is a.myclass, which might only match one or few elements.

1

a.myclass * {…}

However, this is really bad because it will check every element to see if it is descendant of an anchor with the given class.

Final Word

You might be thinking what about the CSS quires, which I use with my favourite javascript library. Those libraries read left to right because that is the way the DOM APIs work. So the guidelines mentioned above is only how the browser will render CSS, so when you are working with stylesheets, focus on right to left.

And be sure to focus on the once that are the most expensive once.

Further reading

Faster HTML and CSS: Layout Engine Internals for Web Developers

Simplifying CSS Selectors

Over the years I have been involved in doing both backend and frontend development, but for some reason there seems to be a lack of understanding and maybe even respect for what Frontend Engineers do.

Maybe it is because that some people think that doing Html, Css, Javascript and so forth is easy, but in reality it can be really difficult, at least if you want to have it done right.

Browsers are the most hostile software development environment imaginable.
– Douglas Crockford

Douglas said this when he was talking about browsers on desktop computers, but he later on changed his mind when he saw how much worse it was on mobile.

There are so many things to keep track of when doing frontend development and you don’t have the same benefit as the Backend people do, like compiling your stuff, so you cant really trust what is going on.

In Nate Koechleys’s speech he sums up how many things that a frontend engineer needs to balance out.

A conservative number may be 672 different things we’re trying to balance as we built out these websites. – Nate Koechley

The number doesn’t include things like usability, performance and security.

In my mind, frontend engineers should get lots more credit for the work they do.

Watch Nate Koechley speak

Depending on who you are the size of typography is measured in different ways. In the world of printing it is Point - in Web it usually is Pixel.

Pixel seems to make the most sense when you are working with the web, because monitor resolutions are set in pixel and all graphic material is also set in pixel, so pixel is the natural way to go.

The problem with the pixel approach

All web browsers that I know of have the option that will allow users to change the size of the font, which is a pretty good thing in terms of usability, especially for people with visual impairments. However, in Internet Explorer this won`t work if you use pixel, I know that IE7 has a page zoom function that could be seen as a solution, but I would not recommend using pixel, as a rule of thumb.

Choosing Em as the solution

An em is a unit of measurement that it is relative to the parent`s element font size

The default font size, for probably all browsers, is 12pt which is 16 px and one em is therefore 16px. So if you wanted your font-size to be 12px then you should set it to 0.75em (12/16 = 0.75).

You would probably grow tired of having to do division all the time when you have to set a new font-size, so let`s look at an approach that will make it a bit easier.

The trick is easy, set the font size of the body element to 62.5%, because that will turn one em into 10px. This will make the division a little bit easier because now it`s just a matter of dividing with 10 instead of 16.

1
2
3
4
5
6
7
8
9
10
11

body { 
  font-size: 62.5%;  /* equals 10px */
} 
 
p { 
  font-size: 1.1em;  /* equals 11px */
} 
 
h1 { 
  font-size:3.5em;  /* equals 35px */
}

You can also use em to other things then just font size, so knock yourself out ;)