Question

To clarify:

Right now, most likely due to readability, CSS is written somewhat like so:

element {
    text-decoration: underline;
}

#selector {
    font-size: 50px;
    color: red;
    text-decoration: underline;
}

.selector-two {
    color: red;
}

In this example, properties are assigned to selectors to give them a certain style. Also, certain properties are assigned multiple times to different selectors. Would there be a difference in performance or size of the stylesheet if it was written like so:

element, #selector { text-decoration: underline; }
#selector, .selector-two { color: red; }
#selector { font-size: 50px; }

Of course this wouldn’t make it easy to see in the CSS which styles are applied to certain elements, but would there be any benefits if you can minify your CSS code to look this?

Answer 1

CSS speed optimisation is a complete waste of time.

Browsers can parse that stuff ridiculously quickly.

You’d be better off focusing on reducing the file size of your collateral, i.e. your images, css files, html, javascript, etc.