3 ms·

My 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. I

by pests 7y ago

My 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 ago
Because 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 ago
  Something to consider: semantic HTML helps with accessibility.
  - strokirk 7y ago
    Yes, but class names doesn't affect the semantics of their tags.
  - danzig13 7y ago
    Have 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 ago
  I 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 ago
    This sounds very brittle. What if you want to come back in the future and add another section to the component?
leviathan 7y ago
That 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-...

by pests 7y ago

mike1o1 7y ago

Because 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 ago
Something to consider: semantic HTML helps with accessibility.
- strokirk 7y ago
  Yes, but class names doesn't affect the semantics of their tags.
- danzig13 7y ago
  Have 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 ago
I 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 ago
  This sounds very brittle. What if you want to come back in the future and add another section to the component?

leviathan 7y ago

That 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-...