Comments on: CSS performance, who cares?

By: Joacim Boive

Joacim Boive — Tue, 29 Mar 2011 17:42:25 +0000

Very interesting read!

But what about mobile browsers? I would guess it can be quite important.

Maybe a followup is in order? And/Or if you could provide your test files that would be great!

Thanks!

By: Kevin

Kevin — Mon, 21 Feb 2011 19:03:45 +0000

I should have also mentioned that I agree with the overall sentiment of this article. I think CSS rendering time is probably the least of our worries as far as performance goes. And the changes we can make are so minor that only extremely bloated code will show a difference.

By: Kevin

Kevin — Mon, 21 Feb 2011 19:02:44 +0000

How did you test the rendering time? Was it just visual, or were you able to get the actual rendering time via a utility?

Also, I shy away from including the tag name in my class name. This creates an inflexibility when applying class names, since you can never switch out your tag names w/o the class name being out of sync. Probably a minor issue, but thought I’d mention it.

By: Wouter Bos

Wouter Bos — Sat, 19 Feb 2011 06:08:41 +0000

Great comment! I couldn’t agree more. I too use a special prefix. I always do “tag_classname”. I wonder if there’s some (quasi-)official standard for that.

By: Henrik Hofmeister

Henrik Hofmeister — Fri, 04 Feb 2011 00:04:29 +0000

Just a note on the last part:
Using ID’s in your jQuery selectors makes the selectors less dependent on the current HTML structure. It’s easy to break existing jQuery selectors by removing a class in the DOM.

You could also just prefix your javascript specific css classes (eg. “.js-mapcontainer”) – which will show you very clearly that an element should be attached to js (and an indication of what).. also it allows for attaching click and other event handlers to all elements within a container – for instance:
someContainer.find(”a.js-view”).click(function() { /* handle event */ }) );
or even
someContainer.live(”a.js-view”).click(function() { /* handle event */ }) );
I personally use several prefixes – depending on what kind of js im binding – and the source (std library or custom etc.)

By: Matthew Fedak

Matthew Fedak — Wed, 29 Sep 2010 13:53:59 +0000

Interesting read, its really important I know on typical websites but making sure the css is as simple as possible, not too much duplication and then compresses (remove all comments, white-space) and enabling gZip compression at server level too can pay dividends on large css files. Also try to avoid having lots of css files and just have one as less requests is again faster. nice read though, you must have been pretty bored.