Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website1 before continuing with this post, because I’ll be using terms that assume a basic understanding of this CSS methodology.
[…]
It’s very easy to over-modularize and make everything a component. I recommend starting with modifiers, but if you find that your specific component CSS file is getting difficult to manage, then it’s probably time to break out a few of those modifiers. A good indicator is when you find yourself having to reset all of the “block” CSS in order to style your new modifier — this, to me, suggests new component time.
[…]
Due to the global nature of CSS, putting a class on everything gives us control over exactly how our components render. The initial mental discomfort caused is well worth the benefits of a fully modular system.
[…]
However, if this is giving you a major headache, you could look at the extension technique11 that Sergey Zarouski came up with. Essentially, we would use .className [class^="className"], [class*=" className"] in the style sheet to emulate extension functionality in vanilla CSS. If this syntax looks familiar to you, that’s because it is very similar to the way Icomoon12 handles its icon selectors.
[…]
These would then live in your media queries for the respective screen sizes. Pro tip: You have to escape the @ sign in your CSS with a backslash, like so:
[…]
