PreviousNext…

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

Comments on this post are now closed.

About

I’m a developer / general IT wrangler, specialising in web apps, the mobile web, enterprise Java and the odd Domino system.

Best described as a simpleton, but kindly. Read more…