CSS Shorthand Notation
Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. Common overused shorthand properties include:
- padding
- margin
- font
- background
- border
- border-radius
Often times we don’t need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier code with unnecessary overrides and unintended side effects.
The Mozilla Developer Network has a great article on shorthand properties if you are unfamiliar with notation and behavior.
More Stylesheets tutorials
-
SCSS Math Operators
Best practices for writing easy to maintain stylesheets.
-
SCSS Nesting
Best practices for writing easy to maintain stylesheets.
-
CSS Syntax
Best practices for writing easy to maintain stylesheets.
-
CSS Selectors
Best practices for writing easy to maintain stylesheets.
-
CSS Media Queries
Best practices for media queries inside your stylesheets.
-
CSS Declaration Order
Best practices for order of declarations inside stylesheet elements.
-
CSS Class Names
Best practices for writing easy to maintain stylesheets.
-
Code Comments
Best practices for writing easy to maintain code.
-
SCSS Extend and Mixin
Best practices for writing easy to maintain stylesheets.