CSS Shorthand Guide

October 23rd, 2005 by Jerome Dahdah

Using CSS shorthands instead of the regular rules will help reduce the weight of your CSS files dramatically. Instead of writing bloated rules such as:

element {
  background-color: red;
  background-repeat: no-repeat;
  background-image: url(image.png);

we could use the following, which does exactly the same thing:

element {
  background: red url(image.png) no-repeat;

To make our life easier, Dustin Diaz has compiled a comprehensive CSS shorthand guide, explaining all the possibilities and highlighting some of the quirks and things you need to keep in mind.

Comments are closed.

For a full experience, you must agree to the use of cookies. For more information, see our Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.