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 Sass and BEM The BEM Pattern

BEM usefulness?

Surfing around russian-speaking web I've seen a lot of materials about Yandex BEM methodology. There are a lot of supporters out there, but I did not really caught a spot of this practice in english-speaking world. I believe that this methodology can really help to take care of modularity on big projects, but is it worth to follow the pattern on small projects? I am just starting to develop and always wondered if it was a bad practice to rely on tag rules rather than creating dozens of complex named classes. As I am following the learning curve I see how CSS with new SASS syntax and features had already evolved into something more complex than I thought it was previously (now it is more programming-language-alike).

3 Answers

Hi,

After I watched that video I left it a little confused as to what was a "best practice" but everything else you can research and read up on for me seems to suggest this in a few more words than i will use to keep things simpler.

If you work as a team with, css developers, javascript developers and others alike, It is the teams responsibility to have a set naming convention in place, be that BEM or there own they prefer.

If you are a freelancer, you could name things however you like, BUT having a solid naming convention in place will pay dividends in the future especially if you expand and look to involve other on a project.

If I just give you a snippet of my Sass naming conventions:

//* VARS 
//*******************************************
$base-font-size
$large-font-size

$brand-header-color
$brand-hover-header-color
/*Nothing special but keeping it simple means to me a lack of available missed dashes or underscores*/

//* FUNCTIONS
//*******************************************
@function my_function($n) {
  @return $n * 2;
}
/*This is how I name my PHP / WordPress functions so it keeps the same feel for me*/

//* MIXINS
//*******************************************
@mixin myMixin($w, $h) {
  width: $w;
  height: $h;
}
/*I chose camelCase for its tight feel in the document and it felt a good change up*/

Nothing special but for me the convention matches that of what i use in other langs, I name my HTML classes and id's with the same convention as the Sass vars.

My comments all always in CAPS in SCSS or CSS and in Initial Caps in HTML. I thought id just give you an insight into mine to possibly spark some ideas of your own :)

In my opinion BEM is great in theory, my reason for disliking in practice is the over use of underscores making you stretch around the keyboard to often with the need for double keying, but that is simply my option im all about comfort and efficiency.

I hope this helps in some way :)

Craig

BEM is not popular outside of Russia, it's true. Maybe because it's not well known in other countries for now. I'm glad Treehouse is popularizing BEM.

It's great methodology in my opinion and i'm using it in all of my projects. (even small) It helps you to organize your code better and brings more flexibility. You can forget about these !important rules and selector dependencies with BEM. By the way, browsers evaluate markup with only class attributes faster, so you can expect a little speed boost when using BEM methodology.

If you liked BEM, I recommend you to use it with Stylus instead of SASS, because Stylus can concatenate your selectors.

You can write with Stylus:

.block
    // styles for block
    &__element
        // styles for element
        &_modifier
           // styles for modifier

There is a post (Google Translate) where Yandex specialists talk about their migration to Stylus in particular to use BEM more efficiently.

Thank you a lot for the reply and article link. No probs with the translation as I am from Belarus! ;)

You're welcome)

I must say, I've found out SASS and LESS support the concatenation of selectors now, so we can use any preprocessor we like for BEM.

Thank you for you detailed comment! And many thanks for sharing your naming setup! It helps a lot, as I only start to use new syntax and methods and it is always hard to follow all the best practices around!