"Publishing an ASP.NET Core Application to Azure" was retired on May 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Modular CSS with Sass

Well done!

You have completed Modular CSS with Sass!

Sign up for Treehouse Back to Library

What is SMACSS?

2:09 with Guil Hernandez

With SMACSS, we divide our styles into fives categories: base, layout, modules, states, and themes. Each of these categories come with a set of usage rules.

Quick Reference

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Up to this point, we've learned that modularity in CSS, or 0:04
    Sass, is best achieved by minimizing dependencies. 0:08
    That means we need to do our best to write code that does not depend on context, so 0:11
    that it's flexible and reusable. 0:16
    And this stage, we are gonna add a new layer of organization and 0:18
    structure to our code by implementing many of the common principles of SMACSS, or 0:22
    Scalable And Modular Architecture for CSS. 0:27
    SMACSS was created by Johnathan Snook as the style guide that helps organize and 0:31
    structure our CSS for projects on any scale. 0:35
    It also aims to identify repeating patterns in 0:39
    our code that are then combined into modular components. 0:41
    We've already been doing a nice job writing code with BEM. 0:45
    And now that we have the BEM naming convention down pat, 0:48
    we'll stick with that moving forward. 0:51
    So what we're gonna do is take advantage of the categorization methods of SMACSS. 0:53
    Because with SMACSS, we divide our styles into five categories, base, 0:58
    layout, modules, states, and themes. 1:03
    Each of these categories come with a set of usage rules. 1:07
    So let's go over some of them. 1:09
    First, the base rules define what elements look like by default. 1:11
    That's where we write the CSS reset styles and 1:15
    the default styles for element selectors. 1:18
    In the layout rules, we define layout styles for major sections of the page. 1:21
    For instance, the header, footer, sidebar, or grid. 1:26
    The module rules make up the majority of our project styles. 1:30
    That's where we write styles for each module as standalone, reusable components. 1:33
    We've already been doing a good job with modules using M. 1:38
    Finally, the state rules is where we define styles for element states. 1:42
    For example, the hidden, active, collapsed or expanded states of a module. 1:46
    And the theme rules define different colors and 1:52
    images to give our project a different theme. 1:54
    Now, theme rules are usually optional. 1:57
    Next, we're gonna apply some of these SMACSS principles to our project. 1:59
    As you'll soon learn, it's a pretty solid plan for 2:03
    structuring our websites and applications 2:05

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up