Code Guidelines

Component Structure

Now that you understand the CSS Naming Conventions, and SCSS Nesting, you are ready to start creating modular components.

• Start with a short, concise component name
• Include class on the outer-most wraper
• It may be necessary to add a -wrapper suffix or similar modifier for functional reasons, but should not include any specific component styles
  • For example, if your component is set to display: flex;, and it uses pseudo content (like :before or :after), then you may run into some display issues (see Flexbugs Min Height)

<div className="component-wrapper band cool-grey-xxxlight">
  <article className="component">
    <h1 className="component-title">Title</h1>
    <div className="component-description">
      <p>This is a description</p>
    </div>
    <ul className="component-list">
      <li><a href="#">Item</a></li>
    </ul>
  </article>
</div>

The simple example above provides an approach to building modular components. Since all important modules are prefixed with the component class, we are able to apply sass styles utilizing the & ampersand in order to keep specificity low and styles targeted to this specific component. Notice how the li and a elements do not have classes. These items are scoped to the component-list, since an li would not be found outside of the ul.

// scss
.component {
  ... // component styles

  &-wrapper { ... }

  &-title { ... }

  &-description { ... }

  &-list {
    li { ... }
    a { ... }
  }
}

// CSS output
.component { ... }
.component-wrapper { ... }
.component-title { ... }
.component-description { ... }
.component-list { ... }
  .component-list li { ... }
  .component-list a { ... }