1. 9

  2. 3

    I think this conclusion dubiously supported:

    The conclusion is the one you probably arrived at too by now: In CSS, we repeat ourselves too much.

    Repeat ourselves too much for what? What consequences are there of this repetition that make it so bad that we should spend effort on getting rid of it?

    CSS with this much repetition, this much bloat, is slow.

    I don’t think the evidence supports this assertion.

    • Is there evidence that testing all these redundant rules against DOM nodes at runtime is unacceptably expensive? As far as I can tell, no: big complicated websites like BBC News or Tumblr seem to spend about 2 to 4 times as much time computing layout as style, and another 4 or 5 times longer than that on running JS. I don’t think deduplicating CSS declarations would help with this anyway; you still get the same (or larger) set of selectors.
    • Is there evidence that parsing these redundant declarations takes an unacceptably long time? Doesn’t seem so to me; the time that I see Chrome’s dev tools attribute to CSS parsing seems to be a rounding error on complicated websites.
    • Is there evidence that transmitting these redundant declarations over the wire burns unacceptably much bandwidth? I’m not very convinced; redundant text gzips very easily. Right now, the people worrying loudly about page weight are mostly talking about the sizes of images which completely dunk on CSS by a factor of dozens.

    I don’t think there’s evidence here to support the notion that doing things to your source code that will make it more confusing, such as deduplicating declarations in it that are only identical by coincidence¹, is going to net you an appreciable performance gain on any metric you care about. At the very least you have the Amdahl’s Law problem: if you try to optimise a part of a process that only takes a tiny proportion of the total time you’re spending, then even if you optimise it so that it’s infinitely faster, you will still at best have removed only the entirety of the tiny proportion of your runtime that it accounted for in the first place.


    Q: Does it still make sense from a maintenance perspective to avoid repetition when declarations are only coincidentally the same? A: Yes, …

    1. 4

      Solid agree. My understanding is that CSS (unlike a lot of HTML/JS/etc) was specifically designed to allow efficient implementation. Which isn’t an argument to be wasteful, but you have to try really hard to make it a problem. Unlike certain other web techs which spontaneously turn into performance sinkholes unless you maintain constant vigil.

      Nightmare scenario: someone replaces 50K of static CSS with another megabyte of javascript that dynamically generates the “optimal” style for each page.

      1. 2

        Nightmare scenario: someone replaces 50K of static CSS with another megabyte of javascript that dynamically generates the “optimal” style for each page.

        Nightmare? This has been going on for the past couple of years.

        1. 1

          From where did you get your understanding that css was designed to have efficient implementations?

          1. 1

            I’m not him, but I know CSS doesn’t have children selectors (e.g “select all divs which have a child element which matches this selector) mainly for performance reasons, which probably means performance was a consideration when they designed other parts of the spec too.

            1. 1

              Yeah, that’s what I’m thinking of.

          2. 1

            “Nightmare scenario: someone replaces 50K of static CSS with another megabyte of javascript that dynamically generates the “optimal” style for each page.”

            I was thinking more on the lines of them implementing a whole OS in a browser that then renders the CSS in its browser.


            Note: IE crashed on me when I typed a URL to then tell me I’ll need to install a modem. So, they’re not there but getting close…

          3. 2

            Changes in CSS trigger recalculations of layout. Having duplicated CSS may be contributing to the layout recalculations that you see in complicated sites. Especially if you haven’t loaded all of the CSS up front. Ignoring the layout numbers is ignoring half the effect that CSS has on the page.

            I used to work on a tool that did css optimization built into the templating language. Reasons for the tool were that CSS was difficult deduplicate for very large complicated sites but duplicated CSS did cause expensive and unnecessary layout recalculations among other things.

            Add to this the fact that duplicated CSS can sometimes make it difficult to manage global changes on complicated sites. It is possible more expensive than you might be thinking.