Class structure

First I like to define modules.

.module {
  width: 300px;
  height: 200px;
}

Modifiers are classes that only modifies what it is paired with.

.modifier {
  // universal modifier styles. If modules have no shared styles this just doesn’t exist as it will conflict.
}

.module {
  &.modifier {
    // module specific modifier styles
  }
}

And the HTML:

<div class="module modifier"></div>

Advantages: modifiers can be stacked on modules and generic modifiers can be made, maintained, and shared that apply to multiple modules at once.

Because module names should be unique, it is safe to style regular html tags with in it.

.module {
  p {
    // p styles specific to .module
  }
  h3 {
    // h3 styles specific to .module
  }
}

In addition I like defining contexts on the body element. This allows me to tell all modules what context they are in, hook into it, and style modules in a way that I know the context.

For example, if I have a 12 column grid and an optional sidebar, I either have to add classes on all elements effected by this change, or I can use my context classes so the article is aware it needs to make room for the sidebar.

article {
  @include grid-columns(12);
  .has-sidebar & {
    @include grid-columns(9);
  }
}

aside {
  @include grid-columns(3);
}

<body class="has-sidebar">
  <article></article>
  <aside></aside>
</body>

scottkellum/structure.md