Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Modular CSS with Sass Getting Modular with Mixins and Functions The Project Config File

Ian VanSchooten
Ian VanSchooten
3,549 Points
Posted by Ian VanSchooten
Ian VanSchooten
3,549 Points

To Follow BEM, should color variables be named like "$color--primary"?

The colors in the config file of the course Modular CSS with Sass use one hyphen rather than two. It seems that the type of color could be considered a modifier on the base concept of "color", so would it make more sense to use two hyphens? Or is one hyphen simply the standard in this case?

Brooke Smart
Brooke Smart
10,763 Points
Brooke Smart
Brooke Smart
10,763 Points

I was wondering the same. Primary seems like a modifier to me so I would do $color--primary similar to how he did with $font-family--primary...

Dmitriy An
Dmitriy An
11,795 Points

Yep, hope they will clarify it in some of next videos.

Zach Willis
Zach Willis
7,703 Points
Zach Willis
Zach Willis
7,703 Points

Hey Ian! I have the same kinds of questions popping into my head as well. For what I've learned about BEM and Sass I think some of the naming comes down to personal taste. For example, BEM naming goes like this, "Block_ Element--Modifier" and a practical example might be something like: ".MessageCard _ Content--Warning".

I like the idea that you should name Sass vars for what they are. So instead of a "BEMy" $color--primary I think something descriptive about it's intended use is more helpful, so to illustrate I think "$color_ body-copy--primary" would be easier for other people to come behind you and understand what that var is for. This way in the future, other people will know what that rule was intended for and can riff on it with a new "$color _body-copy--blockquote".

*Sorry for the weird formatting here, not sure what's up with the underline markdown business. In BEM traditionally there are two underscores separating the block from the element.