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
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Course Overview

1:52 with Guil Hernandez

In this course, we're going to learn how to write modular CSS with Sass. We'll cover topics such as mixins and functions for writing modular code, the BEM (Block element modifier) approach for naming our classes, and using the BEM principles with the Scalable and Modular Architecture for CSS style guide (also called SMACSS). Towards the end, we'll also get into writing modular media queries and building a grid system with Sass.

Today's websites and 0:05
applications are larger than ever, and a lot hinges on the CSS architecture. 0:06
So CSS that is poorly thought out can be a strain on maintenance and 0:10
development in the long run. 0:14
Besides being efficient and performant, CSS needs to be reusable, scalable, and 0:17
adaptable to different use cases. 0:22
We shouldn't need to re-write our solutions or 0:24
worry about them conflicting with other CSS rules in our project. 0:26
I'm Guil and in this course we're gonna learn how to write modular CSS with Sass. 0:31
We'll cover topics such as mix ins and 0:35
functions for writing modular code, the bam or block element modifier approach. 0:38
For naming our classes and using the BEM principles with the scalable and 0:43
modular architecture for CSS Styleguide, also called SMACSS. 0:47
We'll also get into modular media queries and building a grid system with Sass. 0:51
Using a modular approach with Sass can boost our development workflow and 0:56
cut down maintenance by reducing the amount of code we write. 1:01
And, breaking up our code into modular bits will also improve how 1:04
our code scales. 1:08
Since we're able to reuse it on other parts of our project. 1:09
We'll focus on getting familiar with the patterns of BEM and 1:12
SMACSS by refactoring the CSS for a simple UI toolkit called Poly. 1:14
Currently the CSS for it is poorly thought out, messy, and hard to maintain. 1:20
So our job will be to refactor the CSS with Sass, 1:24
using many of the best practices and principles of modular CSS architecture. 1:28
We're gonna learn how to write code that scales and 1:34
that's easier to use, understand, and maintain. 1:36
And throughout the course, 1:38
make sure you also take a look at the teacher's notes for each video. 1:40
Because they'll provide additional information and 1:43
resources about each topic. 1:45
Coming up next, we'll get started by writing our project's configuration file. 1:48