I believe Jeffrey Way has a quote somewhere that goes like, "think about the developer who can save a couple seconds on a task. At the end of the year he will have accomplished that much more than the developer who didn't". If you have begun to streamline your process learning shorthand css is one method for increasing efficiency.
A staple of every web developer's css tool kit. 99% of websites will require the use of this property, making it an excellent way to reduce time on task. I seem to use this type of shorthand whenever I am using a sprites image file.
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
Probably my favorite css shorthand property. Combines everything you need to style a font. Super quick and concise format. The only thing it doesn't include is letter-spacing.
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
3. Margin / Padding
A truly tricky shorthand property. This is one I still get mixed up.
The format goes as such: margin-top margin-right margin-bottom margin-left. If you think about the short hand like the face of a clock and imagine the clock starting at 12 this becomes a whole lot easier.
However, there are three additional short hand properties. For all sides at once you just specify one measurement (margin: 15px). For the same measurement on top / bottom and right / left you specify just two measurements starting with the top / bottom (padding: 7px 5px).
And now for the tricky one. If your left / right sides are the same measurement but the top / bottom are different you specify top measurment, followed by the joint left / right measurement, and finish with the bottom measurement (margin: 10px 20px 13px). Check the example below as I have shown with code all methods.
margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
Similar to the margin / padding shorthand, you can declare all sides of a border with one declaration. However, unlike margin / padding this is the only format for the border shorthand. Addtionally, properties such as border-width, border-style, and border-color can be combined into a single line.
border: [border-width] [border-style] [border-color];
This is lesser used shorthand property for styling ordered and unordered lists.
list-style: [list-style-type] [list-style-position] [list-style-image];
While this is not a shorthand property, box-shadow's default format is very akin to earlier css shorthand properties.
box-shadow: [horizontal-length] [vertical-length] [blur] [spread] [color] [inset]comments powered by Disqus