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

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.

This video doesn't have any notes.

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

    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

    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