May 30, 2011

Two Element CSS Selector Challenge

Posted by Devin R. Olsen on in CSS Tutorials, Featured Articles | 5 comments

Introduction to a challenge

A while ago I was asked by a follow co-worker if I think it was possible to build an entire site using only two elements in my CSS selectors. Now I must admit, at the time I found the whole idea to be kinda crazy, however the more I got to thinking about it the more I started to love the challenge. So after better defining, then adopting the challenge, I felt it was time to share this code game with everyone.

Take a look at this very site's own style sheet that passes this two selector challenge

As most know, it’s always a good idea keep your CSS selectors slim to help the browser performance. With more and more complex sites however, there seems to be a trend of writing code that just works, and not code that works to the best of its ability.

When browsers read our style sheets, they do so by traversing our markup DOM through the selectors we feed it, then it applies our styles to that element or elements. The longer our selectors are, the more work the browser has to do to locate that element or elements.

Selector lengths may seem trivial at first. However if you multiply that long selector against the size of your style sheet, you can see this how this would impact a site’s performance. By cutting down the length of elements in our selector we help the browser parse through our style sheets faster. Not only does using shorter selectors help with performance, but also helps with organization and legibility for you the developer.

With the two element CSS selector challenge, you push your thinking in a more minimalistic frame of mind with little impact and/or no learning curve.

The Rules:

There is really only one rule at this time, and that’s to never ever exceed more than two elements in your CSS selectors. You may use pseudo, child, adjacent and element attributes in your selectors still, because this does not violate our rule of exceeding two elements.

Examples of valid two element selectors:

li a { .. }

#header #nav { .. }
#nav li { .. }
#nav .active { .. }

.active a { .. }
.active .active { .. }
.category #nav { .. }

li.active a { .. }
li.active a.active { .. }

#nav > li { .. }
viagra buy australia Gynecure capsules are one of the best herbal pills to treat sexual and physical weakness due to over masturbation. One out of three men suffer from this condition of not being able to achieve thought about that levitra prescription erections. This ensures a cialis tablet http://aimhousepatong.com/item8040.html complete satisfaction to the two of them. They think it's normal other problem, because it does not put restrictions on your sex life Unsatisfactory sexual intercourse due to erectile dysfunction there are so many relations that have been spoiled completely. levitra brand online li.current + li { .. }
form input[type="text"] { .. }

#nav li,
li.active a,
li.active a.active { .. }

These are all valid and only using two elements, even if we point to an element and it’s attribute as well.

What is not a valid two element selector?

ol li a { ... }
#nav li a { ... }
#nav .active a { ... }
#nav li.active a.active { ... }

#nav > li a { .. }
li.current + li a{ .. }
form li input[type="text"]

These are not valid because they simply exceed the “two elements only” rule.

When I first picked up this challenge I was really amazed at how natural it was for me to write selectors longer than two elements. During my challenge, I was faced with lots of little instances that really made me rethink my selector approach.

If you indeed try to pick up this challenge, the best advice I can give you is to not be afraid to use more classes in your markup. I found that whenever I was faced with a really tough instance, adding an additional class to my markup was always the best solution.

Over time, I fully adopted this challenge into my everyday practice and now it flows like second nature. So I can promise you, with just a little effort and almost no learning curve, you can drastically improved your style sheets performance and organization.

>> Click here to start your first two selector challenge

Your first challenge is to take this markup and make a proper CSS layout for it using only two elements in your selectors. Once you have completed the challenge, share your link with me here in the comments below and tell me a little about your challenge experience.

Special thanks to Paul Farning and Christoph Saxe for bringing this most excellent challenge to life!

Devin R. Olsen