Syntax and Formatting
The Ushahidi Platform uses the SCSS syntax because it is more consistent and familiar with vanilla CSS.
Indentation should be 4 space tabs. CSS rules should be written on multi-lines.
// Yes
.foo {
display: block;
overflow: hidden;
padding: 0 1em;
}
// No
.foo {
display: block; overflow: hidden;
padding: 0 1em;
}
White space after each declaration and after each ending curly brace.
// Yes
p {
font-size: em(16);
@include media($small) {
font-size: em(18);
}
}
// No
p {
font-size: em(16);
@include media($small) {
font-size: em(18);
}
}
Nesting is one of the best features in Sass, but it can be overused and create unwanted CSS. A best practice is to nest no more than 3 levels deep and to only nest classes when that relationship is absolutely necessary to declare in order to achieve the desired style. Nesting for the sake of organizing the stylesheet is discouraged.
.unordered-list {
list-style-type: none;
.unordered-list__item {
display: inline;
a {
color: blue;
span {
text-decoration: underline;
}
}
}
}
.unordered-list {
list-style-type: none;
}
.unordered-list .unordered-list__item {
display: inline;
}
.unordered-list .unordered-list__item a {
color: blue;
}
.unordered-list .unordered-list__item a span {
text-decoration: underline;
}
Hex is the default color format with RGBA being used when opacity is needed.
Hex values should be written in all caps.
// Yes
.foo {
color: #FF0000;
}
// No
.foo {
color: red;
}
When using RGB, single space after commas and no spaces after parentheses.
// Yes
.foo {
color: rgba(0, 0, 0, 0.1);
}
// No
.foo {
color: rgba( 0,0,0,0.1 );
}
Numbers should display leading zeros before a decimal value less than one and never display trailing zeros.
// Yes
.foo {
padding: 2em;
opacity: 0.5;
}
// No
.foo {
padding: 2.0em;
opacity: .5;
}
// Yes
$length: 2em;
// No
$length: 2;
// Yes
.foo {
width: (100% / 3);
}
// No
.foo {
width: 100% / 3;
}
Single quotes should be used with strings.
// Yes
$font-stack: 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif;
// No
$font-stack: "Helvetica Neue Light", "Helvetica", "Arial", sans-serif;
// No
$font-stack: Helvetica Neue Light, Helvetica, Arial, sans-serif;
// Yes
.foo {
background-image: url('/images/kittens.jpg');
}
// No
.foo {
background-image: url(/images/kittens.jpg);
}
Commenting is CSS is an essential practice that can help explain why and how code is written. Ushahidi's CSS commenting is simple.
// Comments are preceeded by two backslashes
.foo {
background: #000;
}
- related selectors on the same line; unrelated selectors on new lines;
- the opening brace ({) spaced from the last selector by a single space;
- each declaration on its own new line;
- a space after the colon (:);
- a trailing semi-colon (;) at the end of all declarations;
- the closing brace (}) on its own new line;
- a new line after the closing brace (}).
// Yes
.foo, .foo-bar,
.baz {
display: block;
overflow: hidden;
margin: 0 auto;
}
// No
.foo,
.foo-bar, .baz {
display: block;
overflow: hidden;
margin: 0 auto }
When naming classes use lower case letters and a hypen between words.
// Yes
.button-primary
//No
.ButtonPrimary
//No
.button_primary