Programmierrichtlinien für CSS

Block Style

selector {
    property: value;
}
  • Each selector should be on its own line. If there is a comma in a selector list, follow it with a line break.
  • Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon.
  • The closing brace should be flush left, using the same level of indentation as the opening selector.
  • Add two blank lines between sections, but leave no lines between blocks in a section.

Example:

#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

Selectors

  • Use lowercase and separate words with hyphens when naming selectors. Alternatively use camelcase, but never mix both styles in the same project!
  • Use human readable selectors that describe what element(s) they style.

Example:

#comment-form {
    margin: 0;
}

Properties and Values

  • Properties should be organized alphabetically inside each block (with exceptions noted below).
  • Properties should be followed by a colon and a space.
  • All properties and values should be lowercase, except for font names and vendor-specific properties.
  • Use hex code for colors. Avoid RBG and uppercase, and shorten values when possible: #fff instead of #FFFFFF.
  • Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values.

Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to.

#selector-1 {
    -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
}

Dimensional position properties (top, right, bottom, left) should be grouped together outside of alphabetical ordering when paired with a specific type of positioning (relative, absolute, etc.).

#selector-1 {
    font-size: 1em;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

Where width and height are both declared, height should always follow width.

#selector-1 {
    width: auto;
    height: auto;
}

Comments

/* Short comments: one line with no trailing space. */
#selector-1 {
    margin: 0;
}
 
#selector-1 {
    color: #000; /* A short comment can also follow one property/value pair. */
}
 
/*
For longer, multiple line comments that need more room,
add a newline before and after the comment.
Leave one line of space before the next block.
*/
 
#selector-1 {
    margin: 0;
}

For comments denoting a new section, use the following notation (see CSS Flags). Sections are separated from the previous block by two lines, and should have one following line of space.

#selector-1 {
    color: #000;
}
 
 
/* Name of section
-------------------------------------------------------------- */
 
#selector-2 {...