Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
software:programmierrichtlinien:css [2011-09-28 08:34] – angelegt zueger1 | software:programmierrichtlinien:css [Unbekanntes Datum] (aktuell) – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1 | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== Programmierrichtlinien für CSS ====== | ||
- | |||
- | ===== Block Style ===== | ||
- | <code css> | ||
- | 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: | ||
- | <code css> | ||
- | # | ||
- | # | ||
- | #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: | ||
- | <code css> | ||
- | # | ||
- | 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. | ||
- | <code css> | ||
- | #selector-1 { | ||
- | -moz-box-shadow: | ||
- | -webkit-box-shadow: | ||
- | 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.). | ||
- | <code css> | ||
- | #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. | ||
- | <code css> | ||
- | #selector-1 { | ||
- | width: auto; | ||
- | height: auto; | ||
- | } | ||
- | </ | ||
- | |||
- | ===== Comments ===== | ||
- | <code css> | ||
- | /* Short comments: one line with no trailing space. */ | ||
- | #selector-1 { | ||
- | margin: 0; | ||
- | } | ||
- | |||
- | #selector-1 { | ||
- | color: #000; /* A short comment can also follow one property/ | ||
- | } | ||
- | |||
- | /* | ||
- | 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. | ||
- | <code css> | ||
- | #selector-1 { | ||
- | color: #000; | ||
- | } | ||
- | |||
- | |||
- | /* =Name of section | ||
- | -------------------------------------------------------------- */ | ||
- | |||
- | #selector-2 {... | ||
- | </ | ||