Organizing css with SMACSS and BEM (sass)

Organizing css with SMACSS and BEM (sass)


Organizing (S)CSS with SMACSS and BEM

Hi all!

My css always end up being this uncomfortable large and unorganized blob of a file, seemingly regardless of my projects size. To battle this I'va started to learn Sass and started to read up on organization of the code.

I’ve come a cross both SMACSS and BEM, and I find them both quite appealing. I want to start using them but I’m not sure how to implement them both at the same time. I’ve seen anything relevant I could find on youtube and read a few articles, but alas I am struggling.

Are any of you using this approach to organize styles? Do you have any concrete examples implementing both of them?

Say you have a page with a header, multiple sections and a footer. What styles goes in the layout file and what goes in the modules?

I will be very grateful I any of you could share experience regarding this. Or if you know of any good learning resources. (I’ve already done the Treehouse course on Modular CSS with Sass).



Mi Michael, I’m in the search for documentation in SMACSS and BEM also, but so far, the best resources I’ve found are the site and this video by Matt Staufer.

If you have a credit card, there is an awesome course at

You could create a free acount that expire after a week, but you will need a credit card to do so.