|
|
| (80 intermediate revisions by 10 users not shown) |
| Line 1: |
Line 1: |
| {{Work in progress}} | | {{Template:Migrated|newDocId=/general/development/policies/codingstyle/css}} |
| | |
| The Moodle CSS coding style
| |
| | |
| == Overview ==
| |
| | |
| === Scope ===
| |
| | |
| This document describes style guidelines for developers working on or with Moodle code. It talks purely about the mechanics of code layout and the choices we have made for Moodle.
| |
| | |
| === Goals ===
| |
| | |
| Consistent coding style is important in any development project, and particularly when many developers are involved. A standard style helps to ensure that the code is easier to read and understand, which helps overall quality.
| |
| | |
| Abstract goals we strive for:
| |
| | |
| * simplicity
| |
| * readability
| |
| * tool friendliness
| |
| | |
| == Naming Conventions ==
| |
| | |
| Filenames should:
| |
| | |
| * be whole english words
| |
| * be as short as possible
| |
| * use lowercase letters only
| |
| | |
| == Block Style ==
| |
| | |
| * 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.
| |
| | |
| === Correct ===
| |
| | |
| <code css>#selector_one,
| |
| #selector_two {
| |
| color: #fff;
| |
| background-color: #000;
| |
| }</code>
| |
| | |
| === Incorrect ===
| |
| | |
| <code css>#selector_one, #selector_two { color: #fff; background-color: #000; }</code>
| |
| | |
| == Selectors ==
| |
| | |
| * Follow Moodle [[Coding style]] for naming selectors.
| |
| * Names should be simple English lowercase words.
| |
| * Words should be separated by underscores.
| |
| * Verbosity is encouraged: names should be as illustrative as is practical to enhance understanding.
| |
| | |
| === Correct ===
| |
| | |
| <code css>#selector_name {
| |
| color: #fff;
| |
| }</code>
| |
| | |
| === Incorrect ===
| |
| | |
| <code css>#selName {
| |
| color: #fff;
| |
| }</code>
| |
| | |
| == Properties and Values ==
| |
| | |
| * 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.
| |
| * 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.
| |
| | |
| === Correct ===
| |
| | |
| <code css>#selector {
| |
| color: #fff;
| |
| }</code>
| |
| | |
| === Incorrect ===
| |
| | |
| <code css>#selector {
| |
| color: #FFFFFF;
| |
| background-color: rgb(0, 0, 0);
| |
| }</code> | |
| | |
| == Comments ==
| |
| | |
| See [http://cssdoc.net/wiki/CssdocDraft CSSdocDraft Standards]
| |
| | |
| == Progressive Enhancement ==
| |
| | |
| * Code should follow the Moodle principle of progressive enhancement for all supported browsers for that specific version of Moodle.
| |
| * Fallbacks should always be provided as well as vendor prefixes
| |
| | |
| <code css>#selector {
| |
| background-color: #444444; /* Fallback for browsers that don't support gradients */
| |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6-IE9 */
| |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
| |
| background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
| |
| background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6 */
| |
| background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
| |
| background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
| |
| background-image: linear-gradient(top, #444444, #999999); /* W3C Standard */
| |
| }</code> | |
| | |
| === Browser Hacks ===
| |
| | |
| * It is not necessary to include browser hacks for versions of browsers that Moodle Core does not provide support for (e.g. IE6 in Moodle 2).
| |
| * Browser hacks for non-supported browser should not be included if they break or inhibit functionality for supported browsers.
| |
| | |
| == Credits ==
| |
| | |
| This document was drawn from the following sources:
| |
| | |
| # The [http://codex.wordpress.org/CSS_Coding_Standards WordPress CSS Coding Standards]
| |
| | |
| == See Also ==
| |
| | |
| * [[Coding]]
| |
| * [[Coding_style|Coding style]]
| |
| | |
| [[Category:Coding guidelines|CSS Coding style]]
| |
