What is a faster / more efficient CSS style?

Question

I was curious which way to style CSS faster (rendering), and then from the perspective of best practice, which method makes more sense (would I say pretty subjectively?).

I can create base classes, for example:

.rounded-corners-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 

OR

I can make another method of applying styles to multiple identifiers / classes:

 #box1, #header, #container, .titles { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 

Answer 1

I agree with tster: the first is to insert a visual command in HTML (always beware of classes with names that describe their appearance, not their purpose). If it has a logical purpose (for example, a section), then it can be cleaner. Otherwise, I would use the second version.

What you really suffer is the lack of abstraction in CSS, which means that you tend to suffer from duplication and / or odd groupings to avoid duplication. You might want to check out this article about Sass . The basic idea is that you write a Sass document (which is not exactly CSS, but similar), which is then compiled into a css document, which you then deploy.

Answer 2

I would always use the second method, it seems to me more logical. I really don’t know if it’s faster to execute it, but it is ahead of it in the file and it saves all your similar attributes / classes together.

Answer 3

I don’t know which one will be displayed faster. But from a service point of view, I would use hate using the second option, because that would mean that the #header element could have rules defined in many different places in CSS. I would not want every time I wanted to make changes, track it down.

Answer 4

I do not think the syntax is important for speed.

Performance is more about when the browser needs to redraw. What happens with events like :hover or when making changes to the DOM. Repainting elements located on absolute or fixed will be the fastest, since they will be redrawn less because they are not built-in, so you do not have to redraw the environment elements.

You can use the Google Page Speed add-on for Firebug to see how reviews happen.

I believe that more browsers will use hardware acceleration for things that should speed things up.

As for the syntax, I would use classes and id that describe the content or use of an element (like your second example). Now you don’t need to change your HTML when you decide that all elements with the class .rounded-corners-5 should have border-radius: 10px . Keep the style and structure apart.

Answer 5

Regarding style, write your html only as a function and write CSS to add a form. Therefore, for identifiers, they must identify the element. Switching to another direction, essentially writing style in html, for example. .blue{color:blue} , which simply clutters your html classes. The goal of CSS is to allow you to change CSS tables and have complete control over your appearance.

Answer 6

The first method works faster if you do not have several identifiers and classes for one element, because then you can more easily remember what classes / id do when you edit your HTML or server script. However, I don’t know which one works faster, and it can even be subjective for many things, such as the browser, the age of the computer, etc., since I don’t know anything about the internal functions of the rendering algorithms into various rendering mechanisms (not that that I could ever learn about 2 of them that we all know and hate without changing tasks ...).

Answer 7

More efficient is one that takes up less space and makes loading a web page faster and faster.

It also helps with search engine optimization (SEO).