I know bem is pretty hot right now, but I think for a good reason. We’re specifically decoupling components for reuse in a modular fashion and ensuring relationships have meaning. This approach ensures that everyone participating in the development of a website is working with the same codebase and using the same terminology. Here’s a short explanation on how to author bem correctly specifically in a parent/child relationship.
It started with a Skype chat between Hugo and I. I’ve been so confused on how to express children of a parent within a primary parent. I guess my brain went berserk and started making up long selectors like
news__header__title and so on to express that
news__header__title was a child of header that was a child of news. As you can see by my result I’ve been smoking something super heavy to go in that direction. I’ve been doing it all wrong and here’s how you should be doing it if you’re in the same boat as me.
Just like the HTML comment in the code example states; If you have something very specific to the
.news__header component, you should create a new block element name entirely. This way we can express children who’s parent is specific to
.header and avoid the long selectors like I had previously. If you want a further explanation on BEM naming then give this CSS Guidelines doc by Harry Roberts a quick scan. As always, if something isn’t clear let me know in the comments or hit me up on Twitter. May the bem be with you.