Skip to content

SASS Style Guide

Jump to bottom
Peter Siemens edited this page Oct 26, 2016 · 7 revisions

1. Element Types

There are three types of elements: components, objects, and utilities.

A. Components

  • A component only appears once on a page
  • Used to define distinct, unique entities on the website
  • Denoted using the .c-{component-name} format

Example:

<body>
  <header class="c-header"></header>
  <footer class="c-footer"></footer>
</body>
.c-header {
  /* header styles here */
}

.c-footer {
  /* footer styles here */
}

B. Objects

  • Objects can appear many times on a page and throughout the site
  • Designed to be reusable and take on different forms
  • Denoted using the .o-{object-name} format

Example:

<ul>
  <li><article class="o-article"></article></li>
  <li><article class="o-article"></article></li>
  <li><article class="o-article"></article></li>
</ul>
.o-article {
  /* article styles here */
}

C. Utilities

  • Utilities can appear multiple times
  • Do not represent entities, but rather common reusable elements
  • Denoted using the .u-{utility-name} format

Example:

<div class="u-container">
  <article class="o-article"></article>
</div>
.u-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

2. Object and component children

Objects and components often contain sub-elements (children) with their own styles. These elements are defined in a way that emphasizes element hierarchy in order to improve the readability and organization of classes.

  • Each sub-level is denoted by appending a __ to the parent class
  • The sub-classes are defined outside of the parent class (not nested)

Example:

<article class="o-article">
  <h1 class="o-article__headline">AMS to lobby province to legislate student housing rights<h1>
</article>
.o-article {
  /* article styles here */
}

.o-article__headline {
  /* article headline styles here */
}

3. Element modifiers

Elements can take on different forms through the use of modifiers.

  • A modifier is denoted by appending a --{modifier-name} to the original class name
  • Useful for defining hover states, active/inactive elements, or different variations of the same element
  • Modifiers do not replace the base class -- they are added as an additional class

Example:

<h1 class="o-headline"></h1>
<h1 class="o-headline o-headline--large"></h1>
.o-headline {
  font-weight: bold;
  font-size: 1em;
}

.o-headline--large {
  font-size: 1.5em;
}

4. Property organization

CSS properties follow standard conventions and grouping patterns across all elements. This allows us to easily identify where styles are applied and improves readability.

Properties fall into five categories: structure, background, border, text, and extra.

Below is a list of the most common properties and which categories they belong to:

// Structure
display
padding-left
padding-right
padding-top
padding-bottom
margin-left
margin-right
margin-top
margin-bottom
width
height
flex

// Background
background
background-color
background-image
background-size
background-position
background-repeat

// Border
border
border-width
border-size
border-style
border-radius

// Text
font-family
font-size
font-weight
font-style
color
text-decoration
text-transform
line-height
letter-spacing

// Extra
transform
opacity
z-index

Conventions

  1. Don't use shortcuts over explicit properties
// Use this:
padding-left: 1em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 2em;

// Instead of this:
padding: 2em 1em;

If you have any questions ping @peter or @atsushi on Ubyssey slack!

Clone this wiki locally