Including BEM in UI Standards & Guidelines

[jkmahoney]

We should add a new section to our Standards & Guidelines documentation on the use of BEM while building sites.

We can reference this page: http://getbem.com/introduction/

Also CSS Tricks has a great page on BEM: https://css-tricks.com/bem-101/

[stephendelancey]

this is also a really good explanation of why BEM is cool. https://www.youtube.com/watch?v=lpxXHkZSl1Q

[michaelspellacy]

Well, here is the thing. Is use of BEM a standard or a recommendation? I like BEM, but I don't think a developer should be tasked with using it if not needed. I see it as more a choice, etc. Thoughts?

[jkmahoney]

It should definitely be a recommendation or "can use" case. We already have a couple developers using BEM on sites, so I thought it would be nice for those who chose to use BEM to have some standards and guidelines to adhere. We could include a new section below our CSS selectors section that would list out naming conventions and use cases for BEM.

[michaelspellacy]

Oh, we can add it, I just don't want to see us enforce it in same way we might enforce using single quotes or something, because at the end of the day there are many techniques to styling, none of which are wrong. It's more a matter of preference. If you don't use BEM and your CSS is impeccably clean, organized, and easy to read, then that is great in my book.

[michaelspellacy]

@jkmahoney So, since you brought up, you will now be responsible for writing the section. :) Post here when you are done so we can all look at it and refine if needed.

[michaelspellacy]

We can even strongly recommenced the technique. If more developers do use BEM, then we can reclassify as a standard. This is how we do it at TMP, and you you will need to do it, too. Etc. Not a problem.

[jkmahoney]

I will gather a couple of devs who use BEM and put together a small section, then I will post back here so the team can take a peek and we can discuss.

[Brockenstein]

@stephendelancey @enielsen0001 and myself are going to help with this.

I love this video https://www.youtube.com/watch?v=IKFq2cSbQ4Q but it gets beyond BEM.

[stephendelancey]

oh hey brock beat me to the link

I wrote a example for bem vs normal nested css

<div class="body">
    <ul class="body__list">
        <li class="body__list-item blue-list-item"></li>
    </ul>   
</div>

//normal nested css
.body {
    background: blue;
  ul {
    display: block;
    li {
            display: inline-block;
    }
    }  
}

//compiles too
.body {
    background: blue;
}
.body ul {
    display: block;
}
.body ul li {
    display: inline-block;
    color: green;
}

//bem nested css
.body {
    background: blue;
    &__list {
        display: block;
    }
    &__list-item {
        display: inline-block;
        color: green;
    }
}

//compiles too. this is more performant also
.body {
    background: blue;
}
.body__list {
    display: block;;
}
.body__list-item {
    display: inline-block;

}

// the main cool part is this though
// this a class on the list item
.blue-list-item {
    color: blue;
}

// will make the list item blue in the bem scss but not the normal nested scss because,
// .body ul li {} is a higher level then .body__list-item