Home » Html » most optimized CSS for browsers

most optimized CSS for browsers

Posted by: admin November 30, 2017 Leave a comment

Questions:

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: enter image description here

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

Answers:

Browsers should be doing any such optimization internally, as they “compile” the CSS. The compiler is responsible for optimization, because it knows about its implementation details and is able to tell, which fits its needs best.

Programmers can take care only of the things that the compiler is unable to deduce (e.g. due to being unable to solve the halting problem). Otherwise, writing semantically correct code is their best bet.

This is actually in accordance with what Antti Koivisto, a contributor to WebKit core, said in 2011, having spent some time optimizing its CSS selector matching:

My view is that authors should not need to worry about optimizing selectors (and from what I see, they generally don’t), that should be the job of the engine.

Quote via CSS Selector Performance has changed! (For the better) by Nicole Sullivan. A good source about modern-day CSS optimization, BTW. The article is referenced in the note at the top of the outdated 2000 article Writing efficient CSS by David Hyatt.

So the concern about premature optimization expressed by some commenters and shared by me is probably warranted.

Questions:
Answers:

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.

Questions:
Answers:

One setback I’m thinking of is responsive capability. Let’s take for example this code:

HTML:

<ul class="overflowHidden blackOnePixelBorder resetPadddingAndMargin noListStyle">
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
</ul>

CSS:

.resetPadddingAndMargin {
    padding: 0;
    margin: 0;
}
.noListStyle {
    list-style: none;
}
.overflowHidden {
    overflow: hidden;
}
.blackOnePixelBorder {
    border: 1px solid #000;
}
.backgroundRed {
    background: #f00;
}
.backgroundGreen {
    background: #0f0;
}
.backgroundBlue {
    background: #00f;
}
.floatLeft {
    float: left;
}
.threePerRow {
    width: 33.33%;
}
.heightTwoHunderPixels {
    height: 200px;
}

http://jsfiddle.net/bqh8he7e/

How are you gonna resolve the problem of overlapping CSS code or if you want to use one class in different resolutions or devices without overwriting it when you want to have all the squares on one line ? (*without JS)

(I hope I understood your idea)