BEMIT: Taking the BEM Naming Convention a Step Further
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 [email protected] 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 Article — Permalink
BEMIT: Taking the BEM Naming Convention a Step Further is a post from CSS-Tricks
LEAVE A REPLY
You must be logged in to post a comment.