Today's websites and

applications are larger than ever, and a lot hinges on the CSS architecture.

So CSS that is poorly thought out can be a strain on maintenance and

development in the long run.

Besides being efficient and performant, CSS needs to be reusable, scalable, and

adaptable to different use cases.

We shouldn't need to re-write our solutions or

worry about them conflicting with other CSS rules in our project.

I'm Guil and in this course we're gonna learn how to write modular CSS with Sass.

We'll cover topics such as mix ins and

functions for writing modular code, the bam or block element modifier approach.

For naming our classes and using the BEM principles with the scalable and

modular architecture for CSS Styleguide, also called SMACSS.

We'll also get into modular media queries and building a grid system with Sass.

Using a modular approach with Sass can boost our development workflow and

cut down maintenance by reducing the amount of code we write.

And, breaking up our code into modular bits will also improve how

our code scales.

Since we're able to reuse it on other parts of our project.

We'll focus on getting familiar with the patterns of BEM and

SMACSS by refactoring the CSS for a simple UI toolkit called Poly.

Currently the CSS for it is poorly thought out, messy, and hard to maintain.

So our job will be to refactor the CSS with Sass,

using many of the best practices and principles of modular CSS architecture.

We're gonna learn how to write code that scales and

that's easier to use, understand, and maintain.

And throughout the course,

make sure you also take a look at the teacher's notes for each video.

Because they'll provide additional information and

resources about each topic.

Coming up next, we'll get started by writing our project's configuration file.