Shorthand: does it really make a difference?

[modo]

I've noticed in many posts that people state they use shorthand to "save a few bytes".

Does it really save that many bytes?

also, is it not easier to read if you define each element differently? or, is this just something you get used to "reading" that way, and coding that way?

sorry if i'm not making sense..i'm very curious about all the nitty gritty things re. CSS. i'm trying to determine what is the "best practice" sort of way to code CSS.

[isitreal]

Think of it this way: if you put one image on the page extra, that is more Bytes than all the bytes all the shortcuts on the page would save you, readability is far more important for page maintainance than saving a few bytes here and there, unless you are working with a site that gets many many thousands of hits a day.

The last site I did loads in about 1 second per page over dialup, no shortcut naming, always easy to read, logical id and classnames that are fully self explanatory on first read, no needing to remember what id="w2" is referring to. One second per page over dialup is so radically faster than the average user is used to that cutting off say 100 bytes or whatever per page is an exercise in something the point of which is beyond me, page maintainability is much more important than saving a few bytes, except for massive sites like google or whatever.

If you're talking about shortcuts like td a {font-size:12px} that's another story, that makes total sense, since it cuts down on code bloat, that's not really a shortcut at all to me, but just a very convenient way to avoid getting a hugely unmanageable page of CSS, if your CSS gets too long it gets very hard to maintain.

It's images that slow pages down, not a few letters extra of code.

Also keep in mind that data transfers over the internet in packets, I belieive of about 1.4 kB in size, so if you page is some multiple of that, say 5.8 kB, or 4 packets, and you cut off .2 kB, it's 5.6 kB, but it's still 4 packets, so it makes absolutely no difference at all.

[ergophobe]

Good post. It got me thinking. If I take a rough draft stylesheet and optimize viciously, I might know off 50%, but how much is due to shorthand? I should point out that I generally use shorthand, so in my case, not much. The lack of shorthand is usually because of accretions in successive rough drafts. So in my case, I think the biggest gains when going from a draft to an optimized sheet are from:

- reducing repetition.
- effectively using the cascade
- eliminating extra whitespace
- shorthand.

Again, though, I typically use shorthand in my drafts. But what if I didn't?

Consider the case where you want to let margins go to the default except for specifying the bottom margin.

margin-bottom: 5px;
margin: 0 0 5px 0;

Savings: 1 byte. If I had chosen the top margin, the cost would be 2 bytes. So it will never cost you much (although I could leave off the last 0 and it would be even).

What if you are specifying all four margins? Specify margin-right as well and you've wasted another 17 bytes (if you tab for indent) on Linux or Mac (new line with \r or \l) and 18 bytes on Windows (new line with \l\r). If you use five spaces for indentation, add another 4 bytes, for 21 total on Windows. Then for left and top, another 20 and 19 respectively. Total wasted: 61 bytes.

Now let's say you do the same for padding - another 61 bytes.

That's 128 bytes per rule, just for padding and margins (this is, however, the absolutely worst case scenario). If you do this for 10 style rules, you spend 1.2 KB. If you could get rid of a 1.2 KB graphic on your site without changing the look whatsoever, would you do it? I would. But on a short style sheet that's only 500 bytes long to beign with, you can probably spend you time optimizing other things.

I don't agree with the previous poster that shortcuts make a page harder to read. Personally, the main reason I use shortcuts is not efficiency by readabilty.

margin: 0 1em .5em;

Is easier for me, personally, to read quickly than

margin-top: 0;
margin-right: 1em;
margin-bottom: 0;
margin-left: .5em;

Tom

[isitreal]

It wasn't clear what the first posting was referring to when he mentioned shortcuts, I don't consider things like padding:0 2px 3px 2px; a shortcut at all, same for border:2px solid #44ab23;

That's just a correct use of CSS syntax, and to me is much more readable, since it give you all you need to know in one line instead of 3 or 4.

But with CSS I never worry about the size, since in most browsers out there, the css is loaded on first page visit, then the browser runs it from cache after that, in fact, I take advantage of this fact by loading the css on every 404 error page for the site, since then I've used it to load the css as well as deliver the page missing message.

On the last sites I've done, the CSS, with massive commenting so the client knows what is happening, comes in at 9 kB, a fraction the size of any image larger than 100 sq. px. Over dialup, even with this extra kb, first page loads in about 3-5 seconds, 1 second after css cached.

[madmatt69]

I think shorthand is great. The extra 2 or 3 kb I might shave off of my CSS file might not make a difference on broadband, but for dialup users if I can give them the page a full second faster then why not? Saves me a little bandwidth, makes the site faster, and that all adds up if you use it with other strategies to optimize your web pages.

[ergophobe]

Isitreal,

Yes, it is real (shorthand properties that is).

It wasn't clear what the first posting was referring to when he mentioned shortcuts,

Actually, he asked about shorthand properties which have a relatively official and specific meaning in the W3C Recs. See:

[w3.org...]

Cheers,
Tom

[modo]

cool. thanks for the link!

[ronin]

I don't tend to use shorthand so much for the minimal savings in the weight of the CSS document.

More because I like to see style descriptions occupy no more than one line (for the sake of clarity) and if it's a long style description involving different borders, paddings, margins etc. then shorthand stops everything from taking up several lines.

[isitreal]

ergophobe: thanks for the link, that clarifies it, I hadn't heard it referred to in that way before in the technical sense.

I agree on the reasons given for using it, I don't do it to make smaller files, I do it because it's easier to read, and faster to type.

[edited by: isitreal at 5:16 pm (utc) on Feb. 25, 2004]

[ergophobe]

I agree with Ronin and add I use shorthand out of laziness. It's just so much faster to type.

Tom

[photon]

use shorthand out of laziness

"Efficiency is merely intelligent laziness."

[zaptd]

margin: 0 1em .5em;

Is easier for me, personally, to read quickly than

margin-top: 0;
margin-right: 1em;
margin-bottom: 0;
margin-left: .5em;

Can you spot the error?

CK

[MatthewHSE]

Shouldn't it be:

margin: 0 1em 0 .5em;

?

[4css]

margin: 0 1em .5em;
Is easier for me, personally, to read quickly than

margin-top: 0;
margin-right: 1em;
margin-bottom: 0;
margin-left: .5em;

Can you spot the error?

CK

Is there really an error? If you are using shorthand and only have this margin: 0 1em .5em; Wouldn't that just make the 0 take care of the top and bottom? (Heh, go easy on me if I am wrong, only learning here ;) )

[MatthewHSE]

When using shorthand, margin is applied in this order:

Top
Right
Bottom
Left

So if you want your top and bottom margins to be 10px, and your right and left margins to be 5px, you'd use the following:

margin: 10px 5px;

In this case, since top-bottom and left-right are the same, the code above works. However, if you use what you suggested:

margin: 0 1em .5em;

The browser assumes that "0" is referring to the top margin, "1em" to the right, ".5em" to the bottom, and that the left margin is unspecified, meaning it should be the same as the right (1em). It's all in the order in which margin is applied when using the shorthand notation.

[grahamstewart]

You are allowed to have 3 numbers after a margin. But..

margin: 0 1em .5em;

..is actually equivalent to..

margin-top: 0; 
margin-right: 1em; 
margin-bottom: .5em; 
margin-left: 1em; 

Note: it is the left margin that gets filled in NOT the bottom one as stated.

The easy way to remember it is that margin is always specified clockwise from 12 o'clock. So its always top right bottom left.

The same rules apply for padding and border properties.

See [w3.org...]

<edit>damn MatthewHSE beat me to it</edit>

[ergophobe]

Whoops! Sorry for the error, but I think the correction has been fully explained. I'd tell you my excuses, but the browser doesn't care why I did it, does it :-)