Question

CSS shorthand vs longhand?

Which one better? Using shorthand like:

padding:5px 10px 15px 20px;

Or using longhand like:

padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;

Related to:

  • performance (browser performance, filesize)
  • documentation (easy maintenance by developer)
  • and others
 21  3996  21
1 Jan 1970

Solution

 19
  • You shouldn't worry about CSS performance unless you have profiled the page load and it has became the bottleneck (I doubt, it is almost always multiple HTTP requests and images).
  • Any competent developer can remember clockwise from top for the order of values.
  • Shorthand means less bytes to be sent, which a CSS minifier doesn't optimise itself (I don't think).
  • I'd only use the long method if setting one value, e.g. padding-left: 3px.
2011-05-11