Name what it looks like
A class named for its look stays true as the design grows.
Adam Wathan@adamwathan@fractaledmind `.btn` isn’t a semantic class, it’s a presentational class just like `bg-red-500`, and named after the visual effect it has. Semantic classes are things like this, which definitely don’t work 😄 (`btn` is a great class and agree layers are awesome!)
Adam Wathan@adamwathan@fractaledmind Tailwind already defines a layer called “components” for you where you can put classes like `btn` btw! 💪🏻
Adam Wathan@adamwathanI used to really hate using explicit color names in my CSS classes, but with the trend towards really colorful designs, trying to shoehorn things into "primary", "secondary", etc. is definitely worse. Here's a good example where "functional" color names just wouldn't make sense:
Cards are modelled on the colorful example in the third post.
Add colors
Add colors and read the class names.
Role namesBad
Look namesGood
<button class="btn bg-teal-500">Save</button>
/* .btn is a great class too: */
@layer components {
.btn { padding: .5rem 1rem; border-radius: .5rem; }
}Why it matters, pros and cons
Why it matters
A name like .btn or bg-teal-500 says what you will see. Role names such as primary stop meaning anything as colors grow.
Pros
- The name matches the look, so you can read the markup.
- New colors need no new vocabulary.
- Renaming is rare because the name never lied.
Cons
- A name that says teal breaks if the design changes to blue.
- Role names still suit a real theme with one brand color.
- Pure look names need a shared scale to stay tidy.