- 5.1. Specificity
- a. Use soft-tabs with a 2 spaces for indentation.
- b. Trim trailing white space on save.
- c. Set encoding file to UTF-8.
- d. Add new line at end of files.
- e. Declaration Order: alphabetical.
- f. Use lowercase and dashes in classes names, not underscores or camelCase.
- g. Do not use ID selectors.
- h. Use a semicolon after every declaration, including the last item.
- i. When using multiple selectors in a rule declaration, give each selector its own line.
- j. Put a space before the opening brace
{in rule declarations. - k. In properties, put a space after, but not before, the
:character. - l. Put closing braces
}of rule declarations on a new line. - m. Separate rules by new lines.
- n. Use single quotation marks for attribute selectors and property values. - ???
Bad
#my_selector{
height:120px;
display : block;
padding: 10px 15px
}
div, p
{
font-family: "open sans", sans-serif;
text-align: center }Good
.my-selector {
display: block;
height: 120px;
padding: 10px 15px;
}
div,
p {
font-family: 'open sans', sans-serif;
text-align: center;
}- a. Prefer hex color codes.
- b. Use shorthand hex values where available.
- c. Uppercase all hex values.
- d. Avoid using shorthand properties for only one value.
- e. Use a leading zero in decimal numbers.
- f. Use
0instead none. - g. Avoid specifying units for 0 values.
- h. Use shorthand when appropriate.
- i. Avoid unnecessary shorthand declarations.
Bad
.selector {
background: #ff9933;
color: rgb(90,90,90);
margin-bottom: 10px;
margin-left: 20px;
margin-right: 10px;
opacity: .5;
padding: 0px 0px 15px;
}Good
.selector {
background-color: #F93;
color: #5A5A5A;
margin: 0 20px 10px 10px;
opacity: 0.5;
padding-bottom: 15px;
}Don't write comments. Ever.
Prefixed with .js-:
<button class='my-selector js-request-lessons-list'>Lessons List</button>Although in the name (cascading style sheets) cascading can introduce unnecessary performance overhead for applying styles. For example:
ul.user-list li span a:hover {
color: red;
}Styles are resolved during the renderer's layout pass. The selectors are resolved right to left, exiting when it has been detected the selector does not match.
If we want to give all a elements inside the .user-list red on hover, we can simplify this style to:
.user-list > a:hover {
color: red;
}And if we want to only style specific a elements inside .user-list, we can give them a specific class:
.user-list > .user-link:hover {
color: red;
}