Organizing css with SMACSS and BEM (sass)

HTML-CSS
#1

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).

Thanks
Michael

#2

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 smacss.com site and this video https://www.youtube.com/watch?v=IKFq2cSbQ4Q by Matt Staufer.

If you have a credit card, there is an awesome course at https://teamtreehouse.com/library/modular-css-with-sass#smacss-and-sass

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

Regards

#3