most optimized CSS for browsers

Question

As a web developer, you can only go to a certain amount of effort to optimize your CSS code. However, computers can take into account way more in almost no time and are thus better in optimizing. The question is: What CSS code is hypothetically the most optimized? (for modern browsers)

Considering the following image:

A, B, C and D are DOM-objects (lets say DIV-elements) and the numbers 1-17 represent attributes (like color, background, width, height, etc)

Whereas all numbers represent a unique attributes. e.g:

4 = background-color: #FF0;     5 = width: 50px; 10 = background-color: #F00; 

There are multiple ways you can generate the css code for this web:

All own ID's

#A { 1 2 5 8 9 10 12 } #B { 1 4 5 11 12 13 14 15 } #C { 1 2 3 5 7 } #D { 3 4 5 6 16 17 } 

However, the file would be very large, the attributes are not shared and a simple test proofs that this is rather slow to render. (image1.html, see file generating script below)

Share some common attributes

#A { 2 8 9 10 12 } #B { 4 11 12 13 14 15 } #C { 2 3 7 } #D { 3 4 6 16 17 } .1 { 1 } .5 { 5 } 

The file would be smaller and the rendering seems to be quicker. (see image2.html)

Share ALL common attributes

#A { 8 9 10 } #B { 11 13 14 15 } #C { 7 } #D { 6 16 17 } .1 { 1 } .3 { 3 } .2 { 2 } .4 { 4 } .5 { 5 } .12 { 12 } 

The file would be even smaller (most of the time) and as it turns out the rendering goes quicker as well. But notice that A, B and C end up with one ID, and 4 classes that contain only one attribute! (see image3.html)

Now these are three simple examples of CSS code. But as you can imagion, when more DOM objects exist, and more overlap of attributes exist, you could theoretically end up with one DOM object with 1 ID and 10'ths of classes!

What CSS code is hypothetically the most optimized? (for modern browsers) Should you limit the amount of classess per DOM object? should you prefer a "single attribute containing class" over adding it to an ID?

p.s. as a test I loaded an image using PHP. Than read the pixel value of that PNG and create the same picture using CSS and DIV-elements. The code for generating image1.html, image2.html and image3.html can be found here You can use ANY PNG image... I used this image

Answer 1

you have already answered your own question with the test you created.

@torazaburo has provided good input for your question.

creating IDs and Classes for every shared attribute will speed up your runtime. on the other hand created classes containing the most attributes will speed up parse time. the problem with both approaches is that if you use this as a rule of thumb, your code will quickly become unreadable and complex to maintain.

this is where your own judgement and work style comes into place. I don't see a point for creating IDs or Classes for single attributes or Classes for elements that are not repetitive in your DOM, as the load time gain you will experience will be insignificant.

therefore, try to prioritise your CSS optimisation by solving code duplication issues. this will effectively reduce your overall load times and make your code readable and maintainable for the future.