Why does coding style matter?
When you have a style guide, code that otherwise seems innocuous immediately raises a flag because the style isn’t followed. This is one of the most overlooked aspects of style guides: by defining what correct code looks like, we are more easily able to identify incorrect code and therefore potential bugs before they happen.
This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.
A good code guide covering much of we would like to emulate is located at Code Guide for HTML and CSS
Familiarize with Bootstrap classnames. They should appear first in a list of classnames. Try to avoid overriding Bootstrap classes, instead override by creating a new custom class. Why? When Bootstrap updates they may change the name of their classes. It is easier to change our own custom classes.
class="btn btn-default your-custom-class"
We use a minimal approach by naming just the most necessary rules. Use lower case and names can consist of different words separated by a “-” (dash).
Components use a name:
.component {…}
.component-name {…}
ID's should not contained "-" (dash). Instead use capital case.
id="componentName"
A consequent use of style, makes it easier for others to understand and use your HTML. In the future, programs like XML readers, may want to read your HTML. Below are a few general principles to follow.
<!doctype html>
<div>
<meta charset="utf-8" />
<div class="menu">
<img src="path/to/img" alt="describe image" />
#selector
) make sure that you have no more than one in your rule declaration. A rule like #header .search #quicksearch { ... }
is considered harmful..listings-layout.bigger
use rules like .listings-layout.listings-bigger
. Think about ack/grep
ing your code in the future.disabled
, mousedown
, danger
, hover
, selected
, and active
should always be namespaced by a class (button.selected
is a good example).:
in property declarations.{
in rule declarations.#000
unless using rgba()
in raw CSS (SCSS’ rgba()
function is overloaded to accept hex colors as a param, e.g., rgba(#000, .5)
).//
for comment blocks (instead of /* */
).margin: 0;
instead of margin: 0px;
.As a rule of thumb, avoid unnecessary nesting in SCSS. At most, aim for three levels. If you cannot help it, step back and rethink your overall strategy (either the specificity needed, or the layout of the nesting).