Few CSS properties and their parsing perfomance

Question

I'm working on a CSS preprocessor, which means that I have the god power to decide what the output HTML will be. I wasn't able to find an information about how the browser apply styles to the elements in lower level. Which one is better?

Let's say that I have width: 100% and I have to apply this to several elements.

body { width: 100%; }
header { width: 100%; }
footer { width: 100%; }

This could be written like that as well:

body, header, footer { width: 100%; }

Which makes the size of the CSS lower. However, this also means that if I want to apply another style to the footer for example I'll end up with something like this:

body, header, footer { width: 100%; }
footer { font-size: 23px; }

And here is the question - the footer element is written twice in the CSS and is that mean that the browser will parse this slower then:

body, header { width: 100%; }
footer { width: 100%; font-size: 23px; }

I believe that combining of selectors is a good thing. However, when the preprocessor starts implementing this it will output styles like that:

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

And that's because it thinks that there will be another element matching margin-top: 10px for example. So, is this a problem. I mean if I have a lot

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

And not everything in one place:

.login-box { margin-top: 10px; font-weight: bold; }

P.S. the question is not about the specificity

==================== EDIT 01 ====================

Here is some SASS code:

%full-width {
   width: 100%;
}
%margin-reset {
   margin: 0;
}

body {
   @extend %full-width;
   @extend %margin-reset;
}

And the output is

body {
  width: 100%; 
}
body {
  margin: 0; 
}

So, the question is: is that actually correct. Isn't it better if the preprocessor outputs:

body { 
   width: 100%; 
   margin: 0; 
}

Lea Verou · Accepted Answer · 2013-08-21 15:02:49Z

1

This sounds like a bug in your preprocessor. You don’t need multiple CSS rules with the same selector, just combine them in your code.

Regarding size, calculate which version is smaller: with or without combined selectors? That depends on the case.

answered Aug 21, 2013 at 15:02

Lea Verou

24k9 gold badges49 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Krasimir Over a year ago

Thanks for the answer @LeaVerou. I just edited my question (EDIT 01 part). Actually SASS currently produces such code, if you use place holders. The question was is there any difference for the browser and is it parses the CSS slower with such a code.

Lea Verou Over a year ago

Even if there is a difference, I’d guess it’s imperceptible. Your worry sounds a bit like premature optimization.

Sunil Kumar · Accepted Answer · 2013-08-21 07:27:17Z

0

What you asked sounds more about CSS specificity. This tool may answer your questions, please review CSS Specificity calculator

answered Aug 21, 2013 at 7:27

Sunil Kumar

1,79918 silver badges35 bronze badges

3 Comments

Krasimir Over a year ago

Thanks for the answer, but that's not what I was looking for. The specificity for the footer for example is the same (I'm referring the code above). The question is if the browser cares if it has to collects its styles from different sources and not only from one particular place.

Sunil Kumar Over a year ago

@Krasimir - Yes it does collect, to all references you made. Please read for more info

Krasimir Over a year ago

Thanks @srk. That's really interesting thing. However I'm more interesting in CSS parsing model and if the browser matters matches of one selector with same specificity several times.

Collectives™ on Stack Overflow

Few CSS properties and their parsing perfomance

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related