CSS brought a solution to the table that allowed presentational style attributes to be offloaded entirely to separate files. Markup could be about content, and content alone.
Inline CSS should only ever be used if there are no other options. Possible scenarios include WYSIWYG editors that generated their own HTML. This underlines the need for hand coding, so a developer is making intelligent decisions. The HTML and CSS specifications were always meant to be readable and easy to use, versus PostScript, PDF, and similar technology demand GUI editors to navigate the deep complexities.
Shorthand Property Methods
For some properties, the CSS specification has shorthand equivalents, which combine multiple properties. The only drawback to them is they aren't totally intuitive. They all rely on the developer to specify things in a certain order and a certain way. Once these nuances are learned however, they are extremely efficient to use and cut down greatly on the number of lines in a stylesheet. The following kinds of properties have shorthand equivalents:
- Margin
- Padding
- Background
- Border
- Font-family/font-size/font-weight/font-style/line-height
For example:
Specifying margins and padding works in the same way, the shorthand equivalent to margin-left, margin-right, etc. is to take the pixel values and enter them all in a clockwise direction. For example, an element with 20px on each side and 40px above and below it would use:
margin: 40px 20px 40px 20px;
This could actually be shortened even further if vertical values and horizontal values are both the same:
margin: 40px 20px;
If there is only margin and/or padding on certain sides of an element, the sides without are zeroed out:
margin: 0 20px 0 20px;
The only difference for padding is to substitute the word margin for padding.
For Further Reference
- 456 Berea Street: Efficient CSS with Shorthand Properties
http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties
Ordering Related Properties
When working with hundreds of lines of style properties, any move towards standardizing the way they are written will yield tremendous improvements in efficiency. Take for example the order in which properties are specified for a selector. Most developers will not take this into consideration, instead writing them in the most convenient place. But when it comes time to revisit those properties (as many will do millions of times over the course of their careers) there will always be a brief moment of hesitation as an attempt is made to locate properties. What if these properties were grouped together logically and their order standardized across stylesheets, so one always can expect to find a margin property for example in the "right place". The following model achieves this:
selector {
Element display properties (alphabetical):
clear: left;
display: block;
visibility: hidden;
z-index: 1;
Block-level element dimensions:
width: 80%;
max-width: 400px;
height: 20px;
overflow: hidden;
Element Positioning:
float: left;
position: absolute;
top: 50px;
right: 50px;
Properties for block-level elements (ordered according to the box model):
margin: 40px 0 40px 0;
border: 1px solid #000;
padding: 0;
Color (background first, leading in from block-level properties):
background: #000 url(images/bg.jpg);
color: #fff;
Content properties for text, lists, and tables (alphabetical):>
letter-spacing: 0.5px;
list-style: disc inside;
text-align: center;
text-decoration: underline;
text-indent: 20px;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}