Optimizing my CSS

Question

I have CSS that looks like this:

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

There's a lot that specifies left, right, top, bottom etc. Is there any way that I can optimize / simplify the CSS. I wish there was a shortcut for this like there is for border.

Thanks

Answer 1

There is no shorthand for top, bottom, left, right.

Answer 2

You can't shorten this:

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

But you could shorten this:

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}
div#gbar {position:absolute;top: 10px;bottom: 10px;left:500px; right: 30px;}
div#nbar {position:absolute;top: 10px;bottom: 10px;left:50px; right: 200px;}

To this:

div#sbar, div#gbar, div#nbar { position:absolute; top: 10px; bottom: 10px }

div#sbar { left:10px; right: 10px }
div#gbar { left:500px; right: 30px }
div#nbar { left:50px; right: 200px }

This could be useful.

Also, there's no need to use div in div#sbar: ids are by definition unique, so there's no need to qualify the id with the tag name. Using it actually (really, really marginally) slows down your browser.

So this would be better (and more to the point, shorter):

#sbar, #gbar, #nbar { position:absolute; top: 10px; bottom: 10px }

#sbar { left:10px; right: 10px }
#gbar { left:500px; right: 30px }
#nbar { left:50px; right: 200px }

---

Here's an example where I actually did something very similar to what I've just suggested:

• How can I refactor some repetitive HTML and CSS?

It actually worked out better in that question, because all the divs were contained in a common parent, so there was no need to list out the elements twice.