bungdito bungdito - 2 years ago 114
CSS Question

CSS shorthand vs longhand?

Which one better? Using shorthand like:

padding:5px 10px 15px 20px;

Or using longhand like:


Related to:

  • performance (browser performance, filesize)

  • documentation (easy maintenance by developer)

  • and others

Answer Source
  • 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.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download