views:

109

answers:

4

If I have the following HTML:

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

how should I organize the CSS to achieve the fastest page load time?

I could organize it by HTML element, like this:

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

or by CSS style, like this:

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

Which, if either, would be read and processed faster?

EDIT: I should have mentioned, I'm working with GreaseMonkey right now, which means two potentially important things:

1) I can't edit any HTML, only CSS

2) All of my CSS is read after the page finishes loading normally.

A: 

You should probably profile this in different browsers as they are likely to give you different results.

jarrett
How do you profile CSS loading speed?
Nimbuz
+3  A: 

Well, 2nd would certainly be read faster since it's smaller.

As far as "processed" goes, by what browser? Unless the style sheet in question deals with tens of thousands of ids I doubt you'd see any significant difference between the two.

ChssPly76
Thanks. This is what I was wondering.
sfarbota
+3  A: 

I don't see how CSS processing would be a bottleneck in page load time. If you want the page to load faster, reduce the size of the HTML/CSS and paste the CSS into a style tag in the head tag of the HTML. This will avoid an extra GET request, which I'm guessing is the actual source of the slow load time.

Tom Dalling
Not necessarily recommended in dynamic pages except maybe for small amounts of CSS, since you'd lose the benefit of caching. Also not great for reusability. CSS will almost never be the bottleneck (even as an include) so I'd generally not do this myself.
bmoeskau
Agreed. You _probably_ don't need to optimize the page to the point of putting all CSS in the HTML files.
Tom Dalling
+1  A: 

Why not:

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

And then:
Paragraph 1

<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>
Traveling Tech Guy
You beat me to it. Its also a neat option but it depends on your markup, sometimes this is worth doing, not always though.
Nimbuz
I'm not particularly fond of your solution, as you are basically including presentation details into the class. What if one day the blue thingie has to appear as green? You will have to modify your css so to say that .blue { color: green; }.
Stefano Borini
Stefano, my idea is to separate content from presentation as much as possible. Once an HTML page is ready, I'd rather edit just CSS files from now on.By the way, sorry for the multiple edits on this answer. Installed FF 3.6b3 and I'm experiencing issues with the markup on this site (the edit icons disappear, lines escape the code markup etc.) Am I the only one?
Traveling Tech Guy
I agree with you, but my objection is relative to the css class name, which should express meaning, not presentation.
Stefano Borini
Agreed. Obviously, this was just lazy, quick-typing :)
Traveling Tech Guy
Also, we don't know what the different paragraphs are supposed to represent, so we don't know enough to name the classes.
outis
This is a good idea, but, as I should have mentioned, I'm currently writing a GreaseMonkey script, meaning I can't edit the HTML.
sfarbota