CSS Coding Style
Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.
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
#selector_one,
- selector_two {
color: #fff;
background-color: #000;
}
Incorrect
#selector_one, #selector_two { color: #fff; background-color: #000; }
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
#selector_name {
color: #fff;
}
Incorrect
#selName {
color: #fff;
}
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
#selector {
color: #fff;
}
Incorrect
#selector {
color: #FFFFFF;
background-color: rgb(0, 0, 0);
}
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
#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 */
}
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:
