“Attribute Modules for CSS”
An idea by Glen Maddern for moving styling with attributes rather than classes. Not an entirely new concept, but it’s interesting to give it a name and explain a system based around it. Thoughts:
- It avoids namespacing. Using modifiers like “large” is often a tempting naming convention, but too generic for a class name on its own. “Large” would be fine as an attribute value e.g.
am-Button="large" - Cleaner on the HTML side, messier on the CSS side.
- Probably technically slower CSS selectors, but that has been shown over and over to make very little difference except in extreme situations.
- It probably makes the most sense while building a framework or pattern library that features variations. It’s OK that these parts of your site would use an approach like this and your day-to-day styling doesn’t.
- I like how it sounds like caveman talk.
<i am-Ogg="you jane.">