Search code examples
cssperformancebrowserstylesheet

With CSS properties, which is more work for the browser?

I'd like to know which of the ways to do this syntax is more work for the browser:

First:

margin: 0;

Second:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Third:

margin: 0 0;

And finally, the same questions except with 0px;.

Solution

  • In my opinion you should specify a unit like 0px all the time even when you're using 0, to avoid forgetting to add the unit on when you change the value to something non-zero, but that's a matter of personal preference.

    As for the browser, those are all equivalent. It takes negligible time for the browser to understand any of those relative to the download time of the css. For that reason margin: 0px; is the best because it is only 12 bytes compared to the longest version you posted which (with `px) units added on) is 69 bytes so nearly 6x the amount of data to download.

    60 bytes isn't much anyways, but if you repeat that a lot, then when it's down to the wire, the shorter syntax is faster. It's also nicer to read :)