UX Design and Development course

The breakdown

The SMACSS process breaks down a site's CSS into the following categories

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

Base

Base Rules address all 'core' UI styles. This typically comes in the form of how you style native HTML selectors and typography. Be careful not to confuse Base Rules with Theme Rules. While Base Rules will contain core elements of the theme, it will not contain the chrome that makes up the theme. Most common use of Base Rules is a CSS reset.

Layout

Layout Rules address the core structure of the site's template(s). In SMACSS, layout Rules refer to the composition of common primary modules that typically appear on every page in your site or app. FOr example, the header, footer, primary nav, and aside to name a few.

A naming convention that SMACSS imposes is to prefix all layout styles with a l-. For example, .l-header { … }.

When it comes to RWD, Layout rules play a large role. The more you can keep your media queries focused on adjusting Layout rules, versus the modules they contain, the easier your life will be.

Layout template

While the SMACSS system states that Layout Rules are specific to these high-level components, there is a hole in reference for dealing with an entire page layout, or layout templates. I would say that if you are working in an environment where there is more then one total view layout template, then there is a larger layout wrapper that encompasses the view.

There is no naming convention for this in the SMACSS system and using the l- prefix could be confusing as this typically refers to smaller layout principal. Extending SMACSS, I would suggest using a lt- prefix to stand for 'layout template'.

For example, the contact-us view in your site

Module

A site is made up of a series of Module Rules. Module rules should be reusable and flexible. Think of modules as the nouns of your site. It is safe to say that at the vast majority of the rules you will write will be related to modules.

When it comes to RWD, you may need to apply some media rules, but this is not the optimal place for setting rules that dictate size and placement of the module. Modules rules should always be allowed to take up 100% width and height is dictated by content.

Also, keep in mind that typically media queries are a property of State rules acting on a module, not the module itself.

State

State rules are active. If modules are nouns, then states are their verbs. They typically describe an action that is happening to the module or the state that the module is in.

A common State rule could be is-active. Additionally, pseudo classes are also definitions of state. Lastly, media queries are a definition of state being imposed into the layout or module.

It is important to address the State rule at the point of which you intend to address the state change. In the following, the state change is applied to the btn class.

<div class="content">
   <div class="toolbar">
      <button class="btn is-active">New thing</button>
   </div>
</div>

Or, if your design requires a state change to the whole module, then it would be placed higher up the DOM tree

<div class="content">
   <div class="toolbar is-active">
      <button class="btn">New thing</button>
   </div>
</div>

Be declarative. If there is a state change to the module and the contained element, be clear with the application.

Example: Assigning individual active stated to modules

This is cleaner as the active states are independent of each other. Application of state is not dependent on the larger module as a whole.

<div class="content">
   <div class="toolbar is-active">
      <button class="btn is-active">New thing</button>
   </div>
</div>

The CSS:

.toolbar.is-active { … }
.btn.is-active { … }
Example: Inheriting state from parent

That is not to say that you can't engineer a whole module state change based on the state of the parent. But in this example, State rules are specific to the parent and duplication of this state requires duplication of code.

This goes against the grain of SMACSS.

<div class="content">
   <div class="toolbar is-active">
      <button class="btn">New thing</button>
   </div>
</div>

The CSS

.toolbar.is-active { … }
.toolbar.is-active.btn { … }

Theme

Theme rules are basically an extension of Base rules, but are not specific to a module. These will include, but are not limited to, setting base colors, ,color application, iconography, and stylistic typography.

Keeping Theme rules abstract will allow you to come back and make sweeping changes to the site without addressing individual modules or states.

Semantic versus presentational

You will hear these terms a lot. What is the difference? Simply put, semantic rules convey meaning as to their application. Typically they will come in the form of a module and the name will depict what the intent of the module is.

Presentational on the other hand, is void of semantic meaning and class names only represent their aesthetic role. Presentational classes are typically used as modifiers. Ways for developers to generically apply presentational styles to DOM elements. For example, it would be common to see a module by it's semantic name followed by presentational modifiers and subsequently state modifiers.

<div class="contact theme-border is-active"></div>