Wiki source code of XHTML & CSS Code Style
Version 8.1 by Ecaterina Moraru (Valica) on 2014/09/11 14:57
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | This document covers some basic conventions that are used in XWiki codebase. Please read over this document and make sure your code conforms to the rules here. | ||
| 6 | |||
| 7 | = XHTML = | ||
| 8 | |||
| 9 | The following rules must be followed: | ||
| 10 | |||
| 11 | * The HTML output produced by XWiki pages must be valid XHTML. | ||
| 12 | * The XWiki project is also following the [[W3C WCAG Guidelines>>http://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines]]. In addition we're also following the [[Dutch Web Guidelines>>http://www.webrichtlijnen.nl/english/guidelines]] which are even stricter than the WCAG ones. | ||
| 13 | |||
| 14 | = CSS = | ||
| 15 | |||
| 16 | The following rules must be followed: | ||
| 17 | |||
| 18 | * the CSS must be valid conform [[CSS 2.1 specification>>http://www.w3.org/TR/CSS21/]]. This can be tested using the [[W3C CSS Validator>>http://jigsaw.w3.org/css-validator/]] | ||
| 19 | * don't use ##!important## declarations | ||
| 20 | * don't use inline style declarations | ||
| 21 | * don't hard code colors in properties - use [[ColorTheme variables>>extensions:Extension.Color Theme Application||anchor="HUsingColorThemesvariables"]] | ||
| 22 | * test your code on at least 3 browsers (IE, FF, Safari) | ||
| 23 | |||
| 24 | The following recommendations could be followed: | ||
| 25 | |||
| 26 | * Properties: | ||
| 27 | ** alphabetical order | ||
| 28 | ** 2 spaces indentation | ||
| 29 | ** put a space between selector and declaration start, ex. "##a {}##" | ||
| 30 | ** use of CSS shorthands | ||
| 31 | ** use relative sizes (em, %) instead of fixed ones (px) | ||
| 32 | ** use appropriate CSS files for writing IE rules | ||
| 33 | *** limit as much as possible the number of IE hacks used | ||
| 34 | * Organization: | ||
| 35 | ** comment headers for separation and grouping of different parts of the code | ||
| 36 | * Overwriting: | ||
| 37 | ** document the localization of the overwrite using "Overwrites" and "Should be in" comments | ||
| 38 | |||
| 39 | == Issues == | ||
| 40 | |||
| 41 | * We currently don't have a naming convention | ||
| 42 | |||
| 43 | == Tools == | ||
| 44 | |||
| 45 | * [[Firebug>>http://getfirebug.com/]] | ||
| 46 | * [[CSS Optimizer>>http://www.cssoptimiser.com/]] and [[CSS Compressor>>http://www.csscompressor.com/]] are two excellent online tools that can shrink CSS | ||
| 47 | |||
| 48 | = Testing = | ||
| 49 | |||
| 50 | See the [[Testing]] page. |
