This is my personal preference for writing BEM SCSS, I don't have any assumptions that this is 'the best way' or anything like that - just what works for me. I'm interested to hear any comments or suggestions, there's always room for improvement!
BEM allows us to use a single classname for an element (thus speeding up it's selection), while making it clear what elements belong to which blocks. This aids in maintainability, as you get context from a file without needing to see the DOM while not making our CSS dependent on the DOM structure.
BEM's methodology relies on the following naming convention: .block__element--modifier
, which you can read more about here.
The goals for this BEM style are: