|
|
| (74 intermediate revisions by 9 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 == | |
| | |
| Within plugins, CSS files are normally named *styles.css*.
| |
| | |
| In the theme, files can be named according to the theme designer's wishes but should:
| |
| | |
| * use lowercase letters only
| |
| * be as short as possible
| |
| | |
| == 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 four spaces of indentation and an ending semicolon.
| |
| * The closing brace should use the same level of indentation as the opening selector.
| |
| * Add a blank line between sections, but leave no lines between blocks in a section.
| |
| | |
| === Correct ===
| |
| | |
| <code css>@media only screen and (min-width: 768px) {
| |
| #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>
| |
| | |
| == Documentation and Comments ==
| |
| | |
| == 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 ===
| |
| | |
| * Do not use any CSS hacks. Moodle provides a more appropriate way to write browser-specific CSS using classes that are added to the body element. For example:
| |
| | |
| <code css>
| |
| .ie7 .forum-post {
| |
| min-height: 1px;
| |
| } | |
| </code>
| |
| | |
| * It is not necessary to include hacks for versions of browsers that Moodle Core does not provide support for (e.g. IE6 in Moodle 2, except legacy theme).
| |
| | |
| == 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]]
| |
