CSS performance

Some thoughtful and useful reading if you’re at all interested in CSS best practice and performant web site design:

Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.Dave Hyatt

To clarify, in his comment Dave is talking about CSS selectors that look like this:

 /* Descendant */
ul li {color: #ccc}

/* Child */
p > img {border: .1em solid #ccc}

/* Sibling */
section + section {margin-top: 0}

… and when you think about it, it’s pretty easy to see how these can eat up resource when rendering content in a browser, compared with standard elements. Anyway, check out the post and subsequent discussion:

Shaun Inman, Qualified Selectors

Comments on this post are now closed.


I’m a software architect / developer / general IT wrangler specialising in web, mobile web and middleware using things like node.js, Java, C#, PHP, HTML5 and more.

Best described as a simpleton, but kindly. You can read more here.