Let’s first familiarize ourselves with CSS rulesets terminology:
[selector]
[property]: [value];
[<--declaration--->]
}
For example:
.foo, .foo--bar,
.baz {
display: block;
background-color: green;
color: red;
}
Here you can see we have
- related selectors on the same line; unrelated selectors on new lines;
- a space before our opening brace (
{
); - properties and values on the same line;
- a space after our property–value delimiting colon (
:
); - each declaration on its own new line;
- the opening brace (
{
) on the same line as our last selector; - our first declaration on a new line after our opening brace (
{
); - our closing brace (
}
) on its own new line; - each declaration indented by four (4) spaces;
- a trailing semi-colon (
;
) on our last declaration.
This format seems to be the largely universal standard (except for variations in number of spaces, with a lot of developers preferring two (2)).
As such, the following would be incorrect:
.foo, .foo--bar, .baz
{
display:block;
background-color:green;
color:red }
Problems here include
- tabs instead of spaces;
- unrelated selectors on the same line;
- the opening brace (
{
) on its own line; - the closing brace (
}
) does not sit on its own line; - the trailing (and, admittedly, optional) semi-colon (
;
) is missing; - no spaces after colons (
:
).
Reference: cssguidelines