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.
