CSS guidelines

原文链接：链接描述

Syntax and Formatting

At a very high-level, we want

• two (2) space indents, no tabs;

• 80 character wide columns;

• multi-line CSS;

• meaningful use of whitespace.

But, as with anything, the specifics are somewhat irrelevant—consistency is key.

Multiple Files

With the meteoric rise of preprocessors of late, more often is the case that developers are splitting CSS across multiple files.

Even if not using a preprocessor, it is a good idea to split discrete chunks of code into their own files, which are concatenated during a build step.

Table of Contents

An up-to-date table of contents provides a team with a single, canonical catalogue of what is in a CSS project, what it does, and in what order.

A simple table of contents will—in order, naturally—simply provide the name of the section and a brief summary of what it is and does.

Naturally, this section would be substantially larger on the majority of projects, but hopefully we can see how this section—in the master stylesheet—provides developers with a project-wide view of what is being used where, and why.

80 Characters Wide

Meaningful Whitespace

• One (1) empty line between closely related rulesets.

• Two (2) empty lines between loosely related rulesets.

• Five (5) empty lines between entirely new sections.

HTML

When writing multiple values in a class attribute, separate them with two spaces

When multiple classes are related to each other, consider grouping them in square brackets ([ and ])

As with our rulesets, it is possible to use meaningful whitespace in your HTML. You can denote thematic breaks in content with five (5) empty lines

Separate independent but loosely related snippets of markup with a single empty line