Code Style Guide

An opinionated set of guidelines for writing and formatting your code. The Golden Rule: Less code is better code.

HTML Guide

Line Breaks

There should always be line breaks between elements. There should also be line breaks between the opening and closing tags of a parent element and any children it contains.

The only exception is in cases of inline content that occurs within text. In this case, the element should be written within the line of the text.


Indent elements relative to their parents, so that each child is indented one tab deeper than its direct parent.

Indent to show that an element is nested inside of another element.

Tabs width should be set to 4-spaces.

Use tabs instead of spaces for indentation. Tabs should be set to four spaces wide.

Self-Closing Tags

Self-closing tags should be written without a slash at the end.

CSS Guide


Use tabs instead of spaces for indentation. Tabs should be set to four spaces wide.

Properties should be indented one tab from the containing selector. Closing brackets should align to the selector.

Property Order

Alphabetize your CSS properties in each declaration block to make them easy to find.

Helpful hint: To quickly alphabetize properties in Sublime Text, highlight the lines you want to sort and go to Edit > Sort Lines or press F5.


A single space between a selector and the opening curly bracket of the declaration block is preferred. There should also be a single space between the colon that follows a property name and the value that follows.

Class Names

Class names should be descriptive of role or meaning rather than of style. Avoid class names that do not carry obvious meaning.

Aim to write class names that are nouns rather than adjectives.

A good method for deciding if a class name is acceptable is to imagine someone reading your CSS who cannot look at the HTML. Would this person be able to make sense of the class? If not, try a more descriptive name.

Use all lowercase and kebab-case for class and ID names, e.g. <p class="some-named-class"> instead of <p class="somenamedclass">.

Favor full words rather than abbreviations or truncations in class and ID names e.g. <p class="preview-description"> instead of <p class="prev-desc">.

Comments & Organization

Make liberal use of comments to break CSS code into discrete sections. Sections should either cover types of global styles (e.g. "Typography") or specific components in your design system (e.g. "Product Listing Card"). It is also sometimes useful to breakup sections into sub-sections.