For me, these classes are best for rapid prototyping. Change the view, slap on the relevant class and voila – you have a different spacing, font-size, color, etc. If I don’t like what I see, then I can just quickly change the class and update the look.
Then, when I have the look that I want, I can create the actual class I want to use and give it the relevant styles using the built-in Webflow system.
In terms of the symbol, if I were hand coding the css then I would definitely recommend NOT to use the @ symbol because of the increased chance of making a coding mistake by leaving out the backspace.
If, however, I’m using a system like Webflow that (theoretically) can take care of the backspaces for me, then I think it’s less of a big deal (unless one plans on exporting the code and using that code outside of Webflow). With that said, Webflow doesn’t allow it, so double-dashes it is