Scalable Modular Architecture for CSS (SMACSS)
Topics:
Table of Contents
Categorization
Introduction
Jonathan Snook begins the SMACSS course with a brief overview of his work history. He started as a freelance developer, moved over to Yahoo, and is now working at Shopify.
Why SMACSS
While Jonathan was at Yahoo, he started thinking about how you make CSS scalable. This lead to him to writing SMACSS. SMACSS provides categorization and naming conventions to CSS. This allows it to decouple from HTML and is better for state-based designs.
Base & Layout
Categorization begins with base styles. Base styles typically include your element selectors and CSS resets or normalize styles. On top of the base styles are the layout styles which include the major containing elements like header, sidebar and main content.
Module
Modules contain content and are the majority of the site. They are an interface each user will have to learn. Modules may require variations like size or color which leads to the creation of module variations.
State & Themes
State styles are like a module variation except indicate a dependency to JavaScript. They describe the look of a module as it’s affected by JavaScript. Theme styles are useful with sites that require on-the-fly changes to the look and feel.
Exercise 1: Layout Styles
In this exercise, create various layout styles for the 5by5.tv website.
Exercise 1: Solution
Jonathan walks through the solution to exercise 1.
Naming Convention
Base and Layout Names
Naming base styles is easy because you use the tag name like html, body, or h1. Layout styles begin with the prefix “layout-“. What follows the prefix is the location. Jonathan recommends using class selectors over ID selectors because of the specificity issues that can arise.
Module and Module Variation Names
Module names do not contain a prefix. Module variations, however, are prefixed with the module name. For example, .btn may be the module name and .btn-large would be a variation name. Style names of module child element should not include the module name so they can be rescued elsewhere.
State Names
Naming states involves adding an “is-“ prefix to the state name like. If the state is specific to a module, then it would be prefixed with the module name. For example, the .btn module may have an active state. That state would be named .btn-is-active.
Theme Names
Theme names use the prefix “theme-“. This allows developers to use the theme classnames throughout the HTML and easily switch out the theme on-the-fly.
Using Third Party Libraries
While answering a question from the audience, Jonathan describes why he likes to hand-code all his CSS and not borrow from any third-party libraries.
Prefixing for Versioning
Prefixing CSS classes with a version name can make migration easier. Version prefixes are easily identifiable and are an indication that a module has been updated. Prefixing is also helpful for packaging or isolating CSS and reducing conflicts.
Thoughts on CSS Workflow
Jonathan shows a few resources about how other companies like Facebook deal with CSS issues like minification and conflict resolution. He also answers a few follow-up questions on versioning.
Naming Convention Recap
Jonathan reviews all the naming conventions he has covered up to this point. He also shares a few alternative naming conventions like Block-Element-Modifier.
Exercise 2: Module Class Names
In this exercise, Jonathan asks the audience to identify FIVE possible modules and the classnames they should be given.
Decoupling CSS from HTML
When is it Base?
Jonathan spends a few minutes talking about base element. In some cases, elements (like a button) should not be considered base and created as a module instead. This allows for more flexibility in design.
Depth of Applicability
When looking at your CSS, it’s important to consider how much HTML is impacted by the rules you write. Too much nesting in CSS rules make maintaining HTML code more difficult.
Decoupling CSS from HTML
Writing single class selectors can be an effective way to break the link between HTML and CSS. These single class selectors would allow you to use different HTML elements in similar locations without needing to change your CSS.
The Owl Selector
While answering an audience question, Jonathan shows a brief example of the Owl Selector and discusses his opinions on when it should be used and when it should be avoided. He also talks briefly about the Single Responsibility Theory.
Exercise 3: Creating a SMACSS Navigation
In this exercise, create a SMACSS-based navigation system for the Engadget website.
Exercise 3: Solution
Jonathan walks through the solution to exercise 3.
State-based Design
State Representation
In SMACSS, states can be represented as classes, pseudo-classes, attribute selectors, and media queries. Jonathan begins his discussion on states by talking about the first three state representations.
Media Query State
Media query states alter the existing CSS at a specific resolution. The should be included with the modules they affect to make maintenance easier. Jonathan talks about a media query strategies and also answers a few audience questions on Modernizr.
CSS Panic
Jonathan shares a game called CSS Panic with the audience. This game is made completely CSS and doesn’t include any JavaScript. It’s a creative example of a state-based approach with CSS.
Preprocessors
Preprocessors provide variables, nesting, and functions to CSS. They also compile all files into a single deliverable. Jonathan demonstrates how preprocessors work and talks about the advantages and pitfalls as they relate to SMACSS.
Extending Classes
Preprocessors allow for CSS classes to be based on another class. Extending CSS classes is nice for code reuse but can lead to side effects. The generated CSS can become quite large and difficult to work with.
Prototyping and Style Guides
Prototyping allows developers to build and test individual components and keeps front-end development independent of engineering. Jonathan shares a few prototyping experiences from his work at Yahoo and Shopify.
Proto Engine
Jonathan walks through Proto Engine which is the prototyping tool he used at Yahoo. He talks about how Mustache was used for tempting within the prototypes. Jonathan also demonstrates a few other third-party prototyping tools.
Documentation Generators
Creating a style guide is useful for documenting front-end development requirements. Automating the generation of a style guide helps reduce redundancy or errors. Jonathan talks about a few tools like Hologram which can help make building and maintaining style guides easier.
Exercise 4: Templating
In this exercise, create a template for the feature pane and content pane on the 5by5.tv website.
Exercise 4: Solution
Jonathan walks through the solution for exercise 4.
Course Summary
Jonathan wraps up the course by covering some best practices with project structure and measuring performance. He gives a number of resources and addresses a couple last audience questions.