Google’s CSS Style Guides
Stylesheet guidelines are dominated by further best-practice and byte-saving techniques:
- use valid CSS unless dealing with bugs or proprietary syntaxes (vendor prefixes)
- use short ID and class names, but ensure they’re not cryptic or presentational (e.g. #blue-button)
- consider prefixed names for larger projects, e.g. #xyz-help, .xyz-column
- simplify selectors when possible, e.g. #example rather than ul#example
- use shorthand syntax notations
- do not use quotes in
url()or unit values after a zero - use short #abc hexadecimal color notation rather than #aabbcc
- end every declaration with a semi-colon (even the last one)
- avoid browser hacks
Google suggests omitting leading zeros from measurements, such as .5em. It saves a character!
The guide recommends a newline for every comma-separated selector which applies to a block.
Finally, it states that property declarations should be alphabetized, e.g.
#example
{
border: 1px solid #000;
border-radius: 6px;
display: block;
font-family: sans-serif;
margin: 1em;
outline: 0;
padding: 10px;
text-align: center;
}