Slim down CSS with shorthand [Hack Your Day]

css If some of you are into tweaking your sites and blogs you may dabble in CSS sometimes. If you want to be all productivity about it, I suggest you “learn” CSS shorthand. Not that there’s too much to learn, it’s just basically a way of writing less inside the file, to make it smaller, hence load faster, hence offer a better user experience.

A very common example is the way we designate margins. If you need an element to have a different margin on all sides, you would normally write:

margin-left: 5px;
margin-right: 10px;
margin-top: 4px;
margin-bottom:8px;

There’s a much-much shorter, more productive and organized way to go about writing all this down, called CSS shorthand. You can write all this in just one short line, like so:

margin: 4px 10px 8px 5px;

This short line will set all the attributes I wrote above, much simpler and productive right? You can also apply this to padding, borders and whatnot, in each case the first number will set the top of the element. The others follow clockwise, so top, right, bottom, left is the order. There is also an ever shorter notation if you have matching top-bottom and left-right values. In this case you could write:

margin: 6px 0;

This would give you top and bottom margins of 6px and left and right margins of 0px. Note that px is not needed for 0 values, you will even pass css validation.

Original post here: Daniel

16 March 2008 | Productivity, Web Design, code, css, html | Comments

Comments:

  1.  
  2.  
  3.