Library

Modular CSS with Sass

193-minute CSS Course

Start Course Play Watch trailer
  • CSS
  • Intermediate

About this Course

Today’s websites and applications are larger than ever and a lot hinges on the CSS architecture. CSS that is poorly thought-out can be a strain on development and maintenance in the long run.

In this course, we're going to build a UI toolkit using many of the best practices and principles of modular CSS architecture. We'll learn how a modular approach with Sass can boost our workflow and cut down maintenance by reducing the amount of code we write. It can also improve how our code scales because we're able to reuse it on other parts of our project.

What you'll learn

  • The patterns of BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS)
  • Writing code that scales, no matter how big the project
  • Writing code that others can easily use and maintain
  • Writing CSS components that don't rely on context

Sass and BEM

With the BEM (Block, Element, Modifier) methodology we're able to define a naming convention that will help make our CSS modular, portable and easier to understand by other designers and developers.

Chevron 9 steps

SMACSS and Sass

SMACSS (Scalable and Modular Architecture for CSS) is a style guide for organizing our CSS. It aims to identify repeating patterns we then code into flexible, re-usable modules. In this stage, we'll continue following the patterns of BEM while using the organization methods of SMACSS.

Chevron 6 steps

Teacher

  • Guil Hernandez

    Guil is a Full Stack JavaScript and Front End Web Development instructor.

Download videos

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

Sign up