Discussion around filesize and classes

email.md

I received this email from someone in response to my Code smells in CSS article in which I advocate the use of classes over not doing (you will need to read the article for full context).

Below is that email conversation, with names removed:

Hiya Harry,

Just wanted to drop you a line to say hi really as I am a fan of your work. I loved your talk about Big CSS, I even made my whole team watch it so they could learn a thing or two.

I have just read your latest blog article "Code Smells..." great stuff in there, some of which I am still guilty of even now. Generally I do try and make all my CSS as robust as it can be though. At my work I am the only one that takes things like HTML, CSS, JS seriously, it gets hard to try and pass on the enthusiasm for great sites onto other members of the team. I will be making them read this post aswell so thanks ;-)

On one of your points (of which I agree) I would like to get your thoughts

Undoing Styles

I agree the same as you that we shouldn't be undoing styles, that if we need to undo then we have probably done something wrong. I have a use case though...

If I want ALL of my H2's to have the border and padding but just want 1 of them not to have it... then from a speed / size point of view it makes sense to do this

h2{
    font-size:2em;
    margin-bottom:0.5em;
    padding-bottom:0.5em;
    border-bottom:1px solid #ccc;
}
.no-border{
    padding-bottom:0;
    border-bottom:none;
}

I am thinking purely on the KB sent to the browser here. An over exaggerated example would be if I had 100 H2's on the page, I wouldn't want 100 of these...

<h2 class="headline"></h2>

When I can make these smaller and just set 1 heading to

<h2 class="no-border"></h2>

Obviously my example is biased, as I'm sure in this instance we just stick with the no-border. I think this would be an example of the "...are typically bad news."

I'm all for OOCSS and using things like Less/SASS properly so that it doesn't just spit out duplicate styles everywhere...

Anyway just my random thoughts ;-)

Hi!

Good question… I’d still use the class :)

If there are 200 headings then they have to be coming out of a loop, so maintenance isn't an issue.

Secondly, if we gzip our content (which of course we will be doing) then we can claw all that filesize back.

I made a couple of test cases.

• Without classes: http://hastebin.com/raw/yafulimoce.html
• With classes: http://hastebin.com/raw/tajotiqexe.html

Note: Hastebin seems to have lost the content, but these files were basically valid HTML documents with 200 h2 elements, each one populated with a totally random string. One file had no classes on the 200 h2s, one file had class="headeline" on all 200 h2s. You can kinda spot this in the screenshot.

I then ran them both through a Gzip profiler which told me:

• The classes compressed better than no classes at all.
• The classed version was only 56 bytes larger than the no classes version.

I have attached a screenshot of this (see row 9) :)

So, by using classes we can scope our styles much better with almost no extra overhead (I think you’ll agree that 56 bytes is absolutely nothing in overhead for even the slowest connections).

Hope that helps,
H

If there are 200 headings then they have to be coming out of a loop, so maintenance isn't an issue.

Not in all cases surely. I think it depends on the type of work you're doing. If, for example, a lot of the work you're doing involves providing a CMS for a client then the chances are that them adding classes to every H2 is not practical.

What about the same test but with the CSS file? One like:

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

.no-border {
    padding-bottom: 0;
    border-bottom: none;
}

...and one like:

h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.headline {
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

I'd take a guess that the former will be "almost no extra overhead" in the CSS (and perhaps even less than the HTML overhead) and is much easier to maintain from a HTML perspective. In fact, when I saved these files and checked without any compression / gzip encoding, the former is only 49 bytes larger.

I'm not suggesting either method is best, just think that the argument is flawed :)

That's not a very telling, or realistic, test because you've got highly repetitive code that's just interlaced with the same class in 200 places. Gzip algos are designed to deal with that sort of code very well. However, it happens that the main point still holds as far as I've seen.

If you skip down to "A note on raw file size and HTTP compression" in http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ you'll see I also wanted to understand the file-size impact of "lots of classes" due to a trait-based approach to UI development. I used an in-the-wild example of a relatively large and varied DOM and stripped all classes from it. The file-size differences were insignificant and that in itself shouldn't be used as an argument against using more classes in your HTML.