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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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