Combining CSS selectors considered bad due to performance?

[Ytterström Anders (Adeprimo)]

Hi,

Something has troubled my mind the past days.

The short version: will extremely grouped CSS selectors have bad impact on performance (reflows/repaints not weight).

The long version:

The main reason for me when throwing out past best practices due to the OOCSS philosophy was the performance boost when leaving context-dependent behind, using classes almost exclusively.

I am however using precompilers to keep my html a bit clean by grouping CSS selectors, where I instead of this:

<div class="notice error form-error"><p>An error occurred when submit in the form</p></div>

prefer to write like this:

<div class="form-error"><p>An error occurred when submit in the form</p></div>

By precompiling my code, the following SASS snippet is used to accomplish a shorter class attribute.

.notice {
/* basic notice styles*/
}

.error {
@extend .notice;
/* error styles */
}

.form-error {
@extend .error;
/* adjusting the error message to fit together with forms */
}

The css:

.notice, .error, .form-error {
/* notice styles */
}

.error, .form-error {
/* error styles */
}

.form-error {
/* adjusting the error message to fit together with forms */
}

This of course cannot be applied all the time - to much grouping will add much weight to the CSS file(s). It is all about common sense when to and not to use @extend instead of multiple classes in the HTML.

Now to my question. This way of coding will sometimes produce groups of 20-30 comma-separated selectors. Could that lead to bad performance in reflows and repaints on my site?

[snobojohan]

This is exactly how we've chose to implement our take on OOCSS also...
Would like to be able to do some performace testing on it, will look
in to it. But if anyone knows of the bat. Please let us now...

On Sep 7, 11:28 am, Ytterström Anders (Adeprimo)

[Nicole Sullivan]

Screwlewse did some tests like this... Can't find the exact URL now.
http://www.screwlewse.com/

Rough answer, multiple class names is fastest, but not by much.

Sent from my iPhone

> --
> You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
> To post to this group, send email to object-or...@googlegroups.com.
> To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.
>

[snobojohan]

Thanks. http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/
is the exakt url. Just before I saw this posted I made a quick and
dirty testpage: http://bandalism.org/stress/

The difference is very small in my tests on Chrome and Firefox (havent
tried in IE yet), in Firefox multiple classes seems slightly faster
but in Chrome the different styles take turns of winning.

On 8 Sep, 22:05, Nicole Sullivan <nic...@stubbornella.org> wrote:
> Screwlewse did some tests like this... Can't find the exact URL now.http://www.screwlewse.com/

>
> Rough answer, multiple class names is fastest, but not by much.
>
> Sent from my iPhone
>

[Dave Gregory]

I think you are talking about this one? 

http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/

[Dave Gregory]

Oh and yeah.. I did some testing with the SASS style of @extend and really found no issue with using it.
The BAD way, would be to use SASS mixins for everything since it repeats the properties instead of having a huge mass of comma, separated items.

From your example, that's a very good way of using @extend; creating a base, then extending upon that, as you would with a any proper object oriented programming language.

Dave

On Sep 8, 2011, at 1:05 PM, Nicole Sullivan wrote: