Question

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 1

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