SASS Style Guide

Jump to bottom

Peter Siemens edited this page Oct 25, 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;
}

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

Clone this wiki locally