Learn SCSS (Sass) and BEM naming methodology by refactoring - HTML/CSS Tutorial

In this video we learn the basics of the BEM naming methodology and we go from the basics of SCSS to abstracting things into a modular architecture.

This is more in the learn-by-doing style of teaching. Instead of building something from scratch with SCSS I thought it would be more beneficial to take something already built with CSS and refactor into modular SCSS. This teaches you how to go back to any existing projects you have and refactor them with SCSS if you want.

If you have any questions or feedback let me know in the comments!

** TIMESTAMPS **
0:50 | BEM Overview
3:02 | Blocks and elements
5:53 | Modifiers
6:40 | Project Overview
9:40 | Project Setup/Configuring Koala
12:50 | Outlining upcoming lessons
13:35 | Variables overview
14:16 | Nesting overview
16:32 | Mixins overview
16:50 | if/else conditionals overview
18:07 | For loops overview
18:28 | Extending styles overview
20:00 | Partials & architecture overview
20:45 | Variables in depth
29:19 | Color variables in depth
32:40 | Font variables in depth
33:48 | Nesting in depth
40:45 | Nesting media queries
55:05 | Mixins & If/else conditionals
1:11:50 | For loops
1:19:27 | Architecture

[MauFerrusca]

Refactoring is a GREAT way to shed off bad habits and start analyzing and enahcing what we do. Great tutorial and teaching style. Very chill and composed.

[D.Dollart]

Thank you very much i started working in a new company and that exactly what i need, love your style i will subscribe and follow you along the next videos!!! You're great man!!

[detroitluv]

Subscribed!! Keep putting out new content. I am apart of the notification gang too!!

[markryandelarmente]

Awesome ! Thanks for this video brad ;)

[RightBackInRehab]

Hi Adam...great video. Just a quick question. From my understanding and I may be wrong here the class "card-list__item__fig" might be going too deep for the BEM methodology. I don't think (in strict BEM) we are supposed to have 2 doubleunderscores in the same class name (tying the classname to tightly to the DOM structure). In this case I may have named the class "card-list__fig" as it still uniquely identifies a block with an element. Just a thought. Great video. Liked.

[remi]

Really helpfull ! You could do something about the css file performance after compliling because i saw that with some scss methods, the css is wrote multiple times, and with others, it's wrote properly.
Exemple: If i'm not wrong, mixins without variables doesn't have sense cause it will rewrite the properties in the className. Instead of make myEl, myOtherEl, anyEl { propertie: value }