styleguide.md

Greg's CSS Styleguide

A fork of a CSS styleguide starting point

Terminology

/* this whole thing is a rule */
selector {
  property: value; /* this line is a declaration */
}

Basic stuff

• Write valid CSS
• Use UTF-8
• Put a space after :
• Put { on same line as selector
• Put a space before {
• Put each rule on its own line

Example:

/* comment */
.egg {
  color: white;
  background: black;
}

Comments

Only /* */ comments are valid in plain CSS

Units

Prefer these units:

• %
• em
• px

Avoid thse units:

• in
• cm
• mm

Indenting

Use consistent two space indenting

Use consistent ID / class name formatting

Use dashes and all lowercase, eg my-style-name

Use consistent quotes

Use single quotes

Duplicate Properties

Do not put the same property twice in the same rule.

/* bad */
.egg {
  color: red;
  color: white;
}

This has no special semantics and is probably a simple mistake.

Do not use the star or underscore hack

The star hack looks like this:

.egg {
  width: 100px;
  *width: 200px;
}

In this example, 200px width is used in IE7 and below. This is invalid CSS. A separate IE7 stylesheet might be better.

The underscore hack is the same thing but with _ instead of *.

Prefer Shorthand

Prefer shorthand unless there is a specific reason not to. For example:

.bad {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 4em;
}

.good {
  margin: 1em 2em 3em 4em;
}

This is not a strict rule because there are cases where longhand might be considered more readable. For example:

/* easy to miss the extra 2 properties */
.shorthand {
  background: url("http://example.com/doglife/eggs/cool/backgrounds/background.png") #fff repeat-y;
}

/* more redundant but less likely to misread */
.longhand {
  background-image: url("http://example.com/doglife/eggs/cool/backgrounds/background.png");
  background-color: #fff;
  background-repeat: repeat-y;

Avoid !important.

It might be appropriate to use !important in some situations, such as paving over flaws in 3rd party CSS that you don't have control over. In most situations, use of !important can be replaced with better inheritence.