Modular CSS with Sass Course (How To)

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

Getting Modular with Mixins and Functions

We'll start by creating our project's main configuration file, then write mixins and functions that will help make our project easier to scale and maintain.

Chevron 10 steps

• Course Overview

  1:52

• The Project Config File

  9:14

• Pixels to Em Function

  6:35

• Sass Function Challenge

  1 objective

• Colors with Sass Maps

  6:35

• Nested Sass Maps

  7:20

• Review: Mixins and Functions

  5 questions

• Background Image Mixin

  7:30

• Pseudo-Element Mixin with @error

  5:45

• Sass Directives Challenge

  1 objective

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

• The BEM Pattern

  3:23

• Using BEM in our Project

  8:22

• Review: The BEM Pattern

  6 questions

• BEM Mixins

  8:20

• BEM Challenge

  2 objectives

• Styling the Headlines

  5:03

• Headline Modifiers

  5:15

• Styling Form Elements

  9:31

• Review: Sass and BEM

  4 questions

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

• What is SMACSS?

  2:09

• SMACSS in our Workflow

  6:01

• Review: What is SMACSS?

  5 questions

• Panel Layout Component

  5:34

• Styling Images

  6:04

• Review: SMACSS and Sass

  5 questions

Sass Grid System

In this stage, we'll learn how to build an easily configurable fluid grid system you can use on any Sass project.

Chevron 6 steps

• Grid Configuration

  6:49

• Generating Column Classes

  3:39

• Column Layout

  7:28

• Sass Grid System Challenge

  3 objectives

• Building the Grid Container

  3:41

• Review: Sass Grid System

  3 questions

Modular Media Queries

In this stage, we'll learn how to write modular media queries with Sass.

Chevron 7 steps

• Media Query Mixin

  5:29

• Using the Media Query Mixin

  2:46

• Creating the Responsive Panel

  3:09

• Building the Responsive Navigation

  2:01

• Creating Element States

  7:42

• Review: Modular Media Queries

  5 questions

• Modular Media Queries Challenge

  1 objective