CSS Rulesets Terminology and Best Practices

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

We will be happy to hear your thoughts

      Leave a Comment

      Web Training Guides
      Compare items
      • Total (0)
      Compare
      0