7

I have been curious as to which method of CSS styling is quicker (rendering wise) and then from simply a best practices perspective which method makes more sense (pretty subjective I would say?).

I can create base classes like:

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

OR

I can do the other method of applying styles to multiple IDs/Classes:

#box1, #header, #container, .titles { 
   -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
           border-radius: 5px; 
}
2
  • 1
    I think this would depend on the implementation (the browser), and I also think the difference would be minimal.
    – Andy E
    Jun 8, 2010 at 18:19
  • I'm interested in which one is considered better coding style. The first one seems at first glance to be better, but then there is separation of concerns since it will be putting the specification of the rounded corners into the html instead of the css.
    – tster
    Jun 8, 2010 at 18:21

7 Answers 7

3

I agree with tster: the first one means putting in a visual command into the HTML (always beware of classes with names that describe their look instead of their purpose). If it does have a logical purpose (e.g. .section) then it may be cleaner. Otherwise I would use the second version.

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

1
  • I asked this question without the knowledge of preprocessors like SASS. It is amazing how ignorance can create so much frustration :).
    – Anthony
    Nov 19, 2012 at 1:20
1

I would always use the second method, it just seems more logical to me. I don't actually know whether its quicker to render, but its neater in the file, and it keeps all of your similarily attributed IDs/classes together.

1

I don't know which one would be rendered faster. But from a maintenance perspective, I would hate using the second option because it would mean that the #header element might have rules defined in many different places in the CSS. I wouldn't want to have to hunt it down every time I wanted to make a change.

1

I don't think the syntax is that important for speed.

The performance is more about when the browser has to do repaints. Which happens on events like :hover or when changes to the DOM are made. Repaints on elements positioned absolute or fixed would be fastest, since there is less to repaint — because they are not inline, so you wont have to repaint surround elements.

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

I believe more browsers will be using hardware acceleration for things like this, which should speed things up a lot.

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

1

As far as style is concerned, write your html to be function only, and write CSS to add form. So for Ids they should identify the element. Going the other direction, essentially writing the style into the html e.g. .blue{color:blue} which will just clutter your html with classes. The goal of CSS is to allow you to swap CSS sheets and have complete control over the look and feel.

0

The first method works more quickly if you don't end up with multiple id's and classes on one element, because then you can more easily remember what the classes/id's are doing when you are editing your HTML or server-script. I don't know which one renders faster, though, and that might even be subjective to many things, such as the browser, age of computer, etc., as I don't know anything about the internals of the rendering algorithms in the various rendering engines (not that I could ever know about 2 of them that we all know and hate without changing jobs...).

0

The more efficient is the one that takes less space and makes the web page load faster and render faster.

This also helps with search engine optimalization (SEO).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.