On our archive, we use CSS shorthand. This means we combine properties to make shorter rules. It's an efficient way to code and it's easy to learn with a bit of practice. With shorthand we can reduce:
background-color: #ffffff;
background-image: url("../images/example.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
To:
background: #fff url("../images/example.jpg") no-repeat left top;
Notice that all these properties begin with background. You can combine properties that have a common prefix.
Shorthand must be written in a specific order. The font property is written like this:
font-style font-variant font-weight font-size line-height font-family
p { italic small-caps 100 2em 1.2 georgia,serif; }
Properties are space separated. Commas denote alternative values (if not Georgia, then serif).
Shorthand for box dimensions, like margin and padding, are written around the clock: top, right, bottom, left.
margin: 1em 2em 3em 4em;
If your value is normal (the default), you can leave it out and the parser will assume you wrote it, just like it assumes html body #main ol.work.index li.blurb h5 a.tag is the same as .blurb .tag. Remember, in CSS we try to only write what is different from the default and inherited values.
Similarly, if your paired values are identical, you only need to write one of them. If margin-top and margin-bottom are the same, and margin-right and margin-left are the same, you can write:
margin: 2em 3em;
If the values are the same all the way round the clock, you can write:
margin: 2em;
Hex codes have paired values: #990000 is 99, 00, 00. So you can let the parser assume the second value in each pair and write #900.
But there are some values you must always declare:
border: 1px solid;font:1em serif;If several elements in a structure have the same rules, we can combine the selectors. Here the comma means and.
.blurb .warning { margin: 1em; }
.blurb .rating { margin: 1em; }
.blurb .rating, .blurb .warning { margin: 1em; }
In our stylesheets, we only combine selectors within a supertype class (.blurb, .navigation etc) section. We don't use 'streamlining' software to find and combine all selectors with the same rules. This makes code really hard to maintain, and can destroy a complex cascade design, so make sure you don't ever do this.
Following are links to the shorthand specs for the properties you'll see most often in our code.
If the specs don't make sense to you, try reading the w3c schools version.