Infoportal
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen RevisionVorhergehende Überarbeitung | |||
| software:programmierrichtlinien:css [2011-10-04 20:17] – 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 {... | ||
| - | </ | ||