So if you learn to use CSS utilities whether Tailwind, Tachyons, or others, you have to learn a DSL. On top of that, to really make these things control your stuff you DO still need to understand mostly CSS itself. So 2 languages.
I could say, "then why not inline styles using real CSS"? The main reason is TW et al do put the values on a scale e.g. it "protects you" from using inconsistent spacing or 50 shades of grey as they say. But gee, is it really that hard to come up with a sensible system yourself?
Ok, another thing is TW now prunes unused classes. Pretty killer feature.
I also understand "fighting" prebaked framework component argument.
But, I really would like folks to dig into these frameworks and CSS itself a bit more. I mean, I pretty much have to use BS at work because it was decided before I showed up. One of the first things I did was replace the href="path/to/all/of/bootstrap.css with a scss module import copied from https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss (we're using scss so I can do this) and commented out anything unused. Then, I learn from their ideas.
Now mind you, away from job after hours I work on my own AgnosticUI framework, also write lots of custom CSS scripts, etc. Folks should be doing both! Same with JavaScript. Use more frameworks not less. Write more of your own platform based JavaScript. Then go and compare. What's amazing that the framework author did that you hadn't thought about? What's silly? Great learning resource.
For AgnosticUI, I always go look at a half dozen implementations in the wild from the big frameworks just to see if I forgot something. For example, "Hrm, why are they using this aria role here? Wait what even is that...I should google it or check MDN". Then I learn. Sometimes, wouldn't you know it, they implemented a11y wrong. Then I can feel smug for a few seconds haha. But other times I'm like "damn, I didn't even know -- good thing I didn't just release this. I would have F'd up accessibility".
Last thing. I see your example and I think -- there are broadly 3 types of CSS style:
CSS utilities (shown)
structure based CSS (shown and your preferred example)
Class chaining, SMACSS etc. (not shown. pretty much Bootstrap uses this as does AgnosticUI and many others. It can use BEM too. Same general idea)
So, style number 2 will always look the cleanest and you can cheer about "look, no classitis". If I was to code for my personal blog, a marketing site, etc., this would work great, and I agree it's cleanest markup. But, style 3 is better and more flexible for larger projects, bigger teams where the CSS skills fluctuate greatly and lots of painful CSS regressions occur, etc.
For style number 1, I feel I must admit that I'm biased against this style but I also have to admit it's very popular and in use by many shops successfully. I've heard there are issues with parallelism having all this in your markup, debug'ability, etc. But I gravitate to "against it" arguments because of my bias. It's viable and smart folks are doing it.
I've come to start using style 2 with sprinkles of CSS utilities for things like flexbox and type when I absolutely know: 1) I'm definitely going to use the heck out of these utilities 2) I'm not going to create many of 'em because it would explode my generated CSS and I don't have some smart JIT pruning engine.
We need to stay flexible, keep learning, and use discretion 💪 ⭐ 🍰
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
So if you learn to use CSS utilities whether Tailwind, Tachyons, or others, you have to learn a DSL. On top of that, to really make these things control your stuff you DO still need to understand mostly CSS itself. So 2 languages.
I could say, "then why not inline styles using real CSS"? The main reason is TW et al do put the values on a scale e.g. it "protects you" from using inconsistent spacing or 50 shades of grey as they say. But gee, is it really that hard to come up with a sensible system yourself?
Ok, another thing is TW now prunes unused classes. Pretty killer feature.
I also understand "fighting" prebaked framework component argument.
But, I really would like folks to dig into these frameworks and CSS itself a bit more. I mean, I pretty much have to use BS at work because it was decided before I showed up. One of the first things I did was replace the
href="path/to/all/of/bootstrap.csswith a scss module import copied fromhttps://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss(we're using scss so I can do this) and commented out anything unused. Then, I learn from their ideas.Now mind you, away from job after hours I work on my own AgnosticUI framework, also write lots of custom CSS scripts, etc. Folks should be doing both! Same with JavaScript. Use more frameworks not less. Write more of your own platform based JavaScript. Then go and compare. What's amazing that the framework author did that you hadn't thought about? What's silly? Great learning resource.
For AgnosticUI, I always go look at a half dozen implementations in the wild from the big frameworks just to see if I forgot something. For example, "Hrm, why are they using this aria role here? Wait what even is that...I should google it or check MDN". Then I learn. Sometimes, wouldn't you know it, they implemented a11y wrong. Then I can feel smug for a few seconds haha. But other times I'm like "damn, I didn't even know -- good thing I didn't just release this. I would have F'd up accessibility".
Last thing. I see your example and I think -- there are broadly 3 types of CSS style:
So, style number 2 will always look the cleanest and you can cheer about "look, no classitis". If I was to code for my personal blog, a marketing site, etc., this would work great, and I agree it's cleanest markup. But, style 3 is better and more flexible for larger projects, bigger teams where the CSS skills fluctuate greatly and lots of painful CSS regressions occur, etc.
For style number 1, I feel I must admit that I'm biased against this style but I also have to admit it's very popular and in use by many shops successfully. I've heard there are issues with parallelism having all this in your markup, debug'ability, etc. But I gravitate to "against it" arguments because of my bias. It's viable and smart folks are doing it.
I've come to start using style 2 with sprinkles of CSS utilities for things like flexbox and type when I absolutely know: 1) I'm definitely going to use the heck out of these utilities 2) I'm not going to create many of 'em because it would explode my generated CSS and I don't have some smart JIT pruning engine.
We need to stay flexible, keep learning, and use discretion 💪 ⭐ 🍰