3 ms·
Typically the "text-sm text-gray-700" would be a one-off styling while I'm developing a page or a component, not necessarily something that will be repeated a h
by mike1o1 7y ago
Typically the "text-sm text-gray-700" would be a one-off styling while I'm developing a page or a component, not necessarily something that will be repeated a hundred times.
If it turns out that later down the line I realize that "every card should have that size and color for the card title", then I'll pull it out to a separate class or part of a partial or something like that.
The idea being at that point then I have more context around when and how that particular section of a component should be displayed, so I have more context about what I should name the class (i.e. "card-subtitle").
I feel like the documentation explains it fairly well if you're interested in reading more about it:
https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components#extractin...
- pests 7y agoMy question is why you cant just name the card and then use selectors to style the title or any other internal styling? This removes the need to name at all. It can just be .card > h2 or whatever and there you would do your font-weight and color.
- mike1o1 7y agoBecause I don't want that cognitive overhead of even thinking about what the selector should be. Then what if I have another sub-sub text? Do I make that an h3? An h4? I don't want to have to think about that. I just make it "text-xs" and move on. I don't even need to move over to my css file at all - I stay within my template and stay within my flow. It seems crazy and counter-intuitive at first, but I find that it makes me a lot more productive.
- iCarrot 7y agoSomething to consider: semantic HTML helps with accessibility.
- strokirk 7y agoYes, but class names doesn't affect the semantics of their tags.
- danzig13 7y agoHave to agree. Having to think about the selector makes you think about the structure and make things more semantic. I have been paralyzed by trying to do things the semantic way before too though. And now no one cares according the markup I venture to look at now and then.
- pests 7y agoI understand but then why not .card > *:nth-child(1) and then so on down the child list? You could get away with those two selectors to match anything with at least an initial name. No decisions except for the first name. Some editors like Brackets allows you to edit other files online and handles css specially so you can edit it just by hovering over class names, etc.
- losvedir 7y agoThis sounds very brittle. What if you want to come back in the future and add another section to the component?
- leviathan 7y agoThat is answered by the author here https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...