Introduction
All CSS in a codebase should be consistent and give the impression it was written by a sole developer. It should be understandable and simple to work with.
Syntax
Consistency is the most important factor when contributing to existing CSS. Generally the following structure should be used:
- 4 space indentation (no tabs)
- 1 declaration per line
- A space after the colon separating the property and value pair
- Lowercase strings
- Always apply a semicolon to the last declaration
- Each selector should have it’s own line
- Include a space before the opening brace of a declaration block
- Closing braces of a declaration block should be on a separate line
- Quote attribute selectors with single quotes
- Separate rules by new lines
// Do not format like this
.selector, .another-selector[attr=""]{
border:0; line-height:inherit;
width:auto}
// Format like this
.selector,
[attr=''] {
border: 0;
line-height: inherit;
width: auto;
}
###Strings Prefer single quotes over double quotes. Once a standard has been set, stick with it.
.selector {
background-image: ('images/super-awesome-image.jpg');
font-family: 'Helvetica';
}
###Declaration Order Alphabetical ordering is preferred. Although a very debatable subject, this style suits an unknown team size because of the following:
- Consistency is the most important factor
- Everyone knows the alphabet
- Not all css contributors can distinguish between box-model properties, positioning, visual and typography
- No learning curve required for custom ordering preferences
// Define declarations alphabetically
.selector {
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .1);
color: #fff;
width: auto;
}
###Units Values of 0 should be unitless. Favour rem over px. Favour seconds over milliseconds. Use relative units whenever possible such as on line-height. Avoid unnecessary leading zero’s.
// Do not do this
.selector {
background-color: rgba(255, 255, 255, 0.4);
border: 0px;
font-size: 16px;
line-height: 24px;
}
// Use relative units
.selector {
background-color: rgba(255, 255, 255, .4);
border: 0;
font-size: 1rem;
line-height: 1.5;
}
If fallback values are required use a mixin when using Sass, otherwise add a fallback in a browser specific file.
###Colours Colours should be written as lowercase hexademical values and in shorthand when possible. If transparency is required favour rgba. Sass can parse hex values for rgba so colour variables and map values can always be stored in hex.
// Do not do this
color: #FF6600;
// Do this
color: #f60;
###Shorthand Group properties into shorthand use when appropriate to avoid adding multiple properties:
// Avoid this
.selector {
margin-bottom: 1rem;
margin-left: 2rem;
margin-right: 2rem;
margin-top: 1rem;
}
// Do this instead
.selector {
margin: 1rem 2rem;
}
Ensure that shorthand is not used repeatedly when it is not needed. If only one value needs changing do not use shorthand:
// Don't do this
body {
font: normal 16px/1.5 'Helvetica';
}
.another-selector {
font: normal 2rem/1.5 'Helvetica';
}
// Do this
body {
font: normal 16px/1.5 'Helvetica';
}
.another-selector {
font-size: 2rem;
}
###Important rule Never use this. Rework selectors instead. You will reap the benefits in the long term.
###Vendor Prefixes Prefixes should never be used in Sass files and should be added via a build tool to ensure only required prefixes are added. IE specific vendor prefixes should be added to an IE only file or through the use of an IE mixin.