made-frontend-standards.md

Made

CSS Standards Guide

• units
• class naming
• class or id
• subclassing
• formatting
• shorthand notation
• z-indexes
• commenting

---

Units

• breakpoints - px
• font sizes - rem
• line heights - unitless (e.g. 1.2)
• margins - px
• padding - px
• widths - %

Class Naming

• dashes instead of underscores
• all lower case
• avoid class names which describe specific content (.joe-smith-avatar) and instead focus on reusable naming (.profile-avatar)
• prefix common identifiers (example: .image-large and .image-small)

Utility Classes

Prefixed with "u-" and used for shared utility styles (alignment, decorations, etc)

.u-underline
.u-alignleft

State Modifers

Prefixed with "is-" and used to denote state-based modifiers.

.is-expanded
.is-active

Class or ID

ID's should be used strictly as javascript hooks. All css should be handled via classes.

Subclassing

Subclassing should only be used when it is necessary to modify existing style declarations.

.container {
    height: 50px;
}

.container.is-expanded {
    height: 200px;
}

Formatting

• order of properties - properties organized alphabetically.
• line breaks - one property per line.
• indentation - 3 space tab width.
• spacing - single space between property and value, single return between selector blocks.
• color values - use hex values (#333) unless using rgba().
• 0 values - avoid specifying units on 0 value declarations, e.g. margin: 0 instead of margin: 0px;

.class {
    color: green;
    display: block;
    height: auto;
    line-height: 1.2;
    margin-top: 20px;
}

.class-other {
    font-size: 1.1rem;
    margin: 0;
    padding: 20px;
}

Shorthand Notation

Use shorthand when declaring 2 or more values.

Good:

margin: 10px; //all
margin: 10px 0; //top and bottom
margin: 10px 0 0 10px; //top and left
margin: 10px 10px 0 10px; //top, right, left

Bad:

margin: 0 0 0 10px; //left only

Use longhand for any individual values.

margin-left: 10px;

Z-Indexes

Think in actual layers - do not use wildcard values (e.g. z-index: 832).

Good:

z-index: 2;
z-index: 3;
z-index: 4;

Bad:

z-index: 20;
z-index: 87;
z-index: 994;

Commenting

Add a header comment to each main section. Prefix with ! to allow for fast finding.

// !MODULE ---------------------------------------------------------------------
// -----------------------------------------------------------------------------

.module {

}

Break a main section into sub-sections if you'd like:

// module body -----------------------------------------------------------------

.module-body {

}

Pass comments anywhere that you feel would benefit from an explanation. Better too many comments than not enough. Some examples:

.map-container {
    display: block;
    /* height: set via map.js */
    width: 100%;
}

.link-image {
    color: transparent; // hide file name flash on firefox
}

.footer-text:after {
    /* text set via pseudo to allow breakpoint changes */
    content: 'here is some really great text';
}