3 ms·

I wouldn't even write such a class name. It smells like bad styling and layouting already. A CSS class should convey some semantic meaning. I would name it afte

I wouldn't even write such a class name. It smells like bad styling and layouting already. A CSS class should convey some semantic meaning. I would name it after the thing that should be red or green, not "red"/"green". That doesn't tell me anything. Maybe its name could be something like "danger" or "active" or something. Also the 500 looks very sus. Responsive design is best when it avoids such hardcoded numbers and depends on its content and dynamic viewport width calculations, and perhaps a few minimum sizes, if necessary to decide when things float, wrap, shrink, grow, etc. It's a red flag (ha).

francislavoie 2mo ago
Absolutely not. Semantic classes are the wrong way to go. Your components (and their props API) are what encode the semantics. With Tailwind you never need to try to come up with a name for anything relating to style, you just use utility classes. It reduces cognitive load significantly.
- drdaeman 2mo ago
  And so we’re essentially back to <font color=red size=10>?
  - trixn86 2mo ago
    have that wrapped in a component named ErrorText and it makes perfectly sense. Why would you need a component ErrorText which restates its own name in the classname again when that classname is only ever used in that exact component. If anything you only need it because your atomic styles sit in another file and you somehow need to reference them. If you have both in the same file with a name ErrorText there is nothing more to give any semantic meaning. Semantic class names make no sense in a component context and that's why tailwind feels like a liberation in the context of component-based web applications. A component and its interface is the semantic meaning, the markup and styles it contains are scoped to that component and should not be / need not be semantic at all. This greatly reduces cognitive load.

francislavoie 2mo ago

Absolutely not. Semantic classes are the wrong way to go. Your components (and their props API) are what encode the semantics. With Tailwind you never need to try to come up with a name for anything relating to style, you just use utility classes. It reduces cognitive load significantly.

drdaeman 2mo ago
And so we’re essentially back to <font color=red size=10>?
- trixn86 2mo ago
  have that wrapped in a component named ErrorText and it makes perfectly sense. Why would you need a component ErrorText which restates its own name in the classname again when that classname is only ever used in that exact component. If anything you only need it because your atomic styles sit in another file and you somehow need to reference them. If you have both in the same file with a name ErrorText there is nothing more to give any semantic meaning. Semantic class names make no sense in a component context and that's why tailwind feels like a liberation in the context of component-based web applications. A component and its interface is the semantic meaning, the markup and styles it contains are scoped to that component and should not be / need not be semantic at all. This greatly reduces cognitive load.