BEMIT: Taking the BEM Naming Convention a Step Further

By Robin Rendle on August 26, 2015 in Web Design
0

Harry Roberts takes a look back at his previous post on abstracting classes and expands on the idea by using the @ symbol:

The @ is a human readable and logical way of denoting conditional states. It allows developers to learn about any potential permutations or appearances that the piece of UI in question might have, just at a glance.

For instance, instead of making a class such as .is-hidden--large (where an element is only hidden on large breakpoints) we’d write .is-hidden@large instead. It might look a little strange but I think this could be very useful for scanning a lot of markup and quickly getting an idea as to what styles will always be applied and those that will only be applied in certain circumstances.

Direct Link to ArticlePermalink


BEMIT: Taking the BEM Naming Convention a Step Further is a post from CSS-Tricks