Coding Standards

  • page
coding-standards  

General Standards

Dont's Do's
Don't use tabs for indentation. Do use four (4) spaces for indentation.
Don't use under_scores or **camelCase** to name classes or IDs. Do use dashes to separate words.
Don't use Class and ID names to reflect the underlying markup structure. .container-span and .small-header-div are bad names. Do think about CSS in terms of objects and use simple nouns as names. .global-alert and .badge are good names.
Don't use ID's and too specific selectors to style. Only use these when absolutely necessary (ex. form controls or page anchors). Do use classes to facilitate reusability and reduce CSS selector specificity conflicts.
Don't commit files with blocks of unused, commented-out code. Do use Git to get the file's history.

<<<<<<< HEAD

Example

button,
.nemo-button {
    background: #999 url('/images/bg.svg');
    border: 0;
    border-radius: .5rem;
    color: #fff;
    cursor: pointer;
    font: 200 1.6rem 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    letter-spacing: .1rem;
    margin: 0;
    padding: .5rem;
    text-decoration: none;
    transition: all .4s;
}

current-docs

Performance & Maintainability

  • Must not use !important to override selector specificity. Instead, adjust the selectors accordingly, or refactor the styles. <<<<<<< HEAD
  • Minimize selectors. Don't use div.main-nav ul li.item a where .main-nav would suffice.
  • Do not use hacks or fallbacks for browsers that are not supported:
    • No star hacks
    • No underscore hacks =======
  • Minimize selectors. Don't use div.main-nav ul li.item a where .main-nav a would suffice.
  • Do not use hacks or fallbacks for browsers we don't support:
    • No star hacks
    • No underscore hacks
    • No fallback needed for rgba() colors
    • We are using Autoprefixer to automatically add vendor prefixes as needed, so only use non-prefixed, W3C-proposed properties

current-docs

Syntax

Best Practices Example
Write multiple selectors on separate lines. 
.btn,
.btn-link {
}
Include one space between the selector and the opening brace. 
.selector {
}
Use shorthand for hex values when possible. #fff vs #ffffff
Write hex values in lowercase. #3d3d3d vs #3D3D3D
Enclose URLs in single quotes. Generally single quotes are preferred over double quotes, since they're easier to type. url ('/image.png') vs url ("/image.png")
Don't use units for zero (0) values, except for angles (deg) and time (s or ms). margin-right: 0; vs margin-right: 0px;
Don't write leading or trailing zeroes for decimal values. .5rem vs 0.5rem
or 1.5px vs 1.500px
Write properties in alphabetical order, for consistency and ease of scanning. Also make sure to have a semicolon after every style rule. 
border: 1 px solid #333;
padding-right: 5px;
z-index: 100;
Use shorthand properties whenever possible. border vs border-style, border-color, and border-width
Use shorthand values whenever possible. 2px 0 0 instead of 2px 0 0 0
Include one space after each comma in a list of values. rgba(0, 0, 255, .75) instead of rgba(0,0,255,.75))

Accesibility

For guidance on accesibility follow the recomendations consigned under Accesibility Guidelines.