bungdito bungdito - 5 months ago 11
CSS 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


Answer
  • 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.
Comments