6 ms·

Styling with Classy CSS (2006)

123 points by jacobr 3y ago

Julesman 3y ago
I will always argue against this. Keep your layout in one file and your styling in another. I've done more CSS than most in heavy web production and I never once had a reason to think something like this would be faster or more efficient.
- city41 3y ago
  I've been a web developer for about 15 years now and I absolutely love Tailwind. I find it so much faster and efficient that it is really aptly named.
- jermaustin1 3y ago
  CSS Utility classes are "faster" and that is the draw, but once they have been overused and abused, then you are either stuck with them, or you spend a lot of time cleaning the tech debt and rewriting the css properly. At my current job, I work on a legacy application which is still actively developed and released. I spend a lot of my time cleaning up inline styles, styles that are applied via javascript calls, and style blocks on individual pages. I wish the inline styles would have been utility classes, because at least then they would be easy to find and replace, instead, there are "margin-top: 3px" and "margin: 4px 0 0" and "padding-top: 2px" and dozens of variations on that that had they just done something like ".mt-small { margin-top: 3px }" there wouldn't be so many variations and inconsistent looking pages. This company would have benefited greatly from Bootstrap or Tailwinds. I hate both of those, but there is no denying how easy they are to use and abuse.
- stevebmark 3y ago
  Say more. What's the distinction between layout and style?
i0nutzb 3y ago
Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...
- matheusmoreira 3y ago
  Yeah. It's essentially a less verbose form of per-element style="..." attributes. It's weird to me that this is considered the state of the art today.
- deleted 3y ago
  [deleted]
- BasilPH 3y ago
  Why do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice examples. MDN is great, but with Tailwind I get reasonable presets. - TailwindUI: Saves me a lot of time and looks good without feeling as generic as bootstrap.
  - haydenchambers 3y ago
    [dead]
  - hipadev23 3y ago
    My gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a <table> with a whole host of <td> elements, those repeated class definitions become quite tedious.
    - colejohnson66 3y ago
      Use PostCSS: .myFancyTable td { @apply p-4; } The advantage of Tailwind, IMO, is that styles for one-off components (like a breadcrumb bar) can just be written inline instead of in a separate file. But reused components like table cells should be using CSS selectors.
      - 3y ago
Brajeshwar 3y ago
This is what I did before stumbling on BEM - https://en.bem.info/methodology/css/ https://en.bem.info/methodology/css/
- munk-a 3y ago
  Now that you're familiar with BEM you can use the perfect css approach `.page__inner__title-f-green {color:#0f0;}` imagine the portability!
  - nailer 3y ago
    Or you can call the login box “.login” and style it.
    - LoganDark 3y ago
      Or you can have fun
      - Muromec 3y ago
        Only when you don't live in SV. There you can't have the concept of fun.
cantSpellSober 3y ago
Yep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap. Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.
- city41 3y ago
  What was the first "official" atomic css framework? I believe it was atomic.css[0]? In this style of css, tailwind is very much a latecomer. [0]https://acss.io/ https://acss.io/
- jamesmccann 3y ago
  I think Tachyons struck the balance to be honest. Tailwind's "functions" and combinations seem to allow a higher level of complexity where it becomes difficult to quickly inspect a class block after some time has passed.
tuyiown 3y ago
So visionary to be considered a wtf. Thanks for the submission, made my day !
- deleted 3y ago
  [deleted]
- city41 3y ago
  Me too. This is really quite amazing in a small way. It really made me laugh.
draw_down 3y ago
[dead]
munk-a 3y ago
It's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability. Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!
- agloe_dreams 3y ago
  This was the only bit in tailwind we modified a lot in our Config. You really need to remove the default colors and define them as [Primary, Secondary, Neutral, Warning, Error, Success] and then add variants of each. Then it really works. I honestly think this should be a default config change/setup option in TW. Nobody with a Design System/Brand guidelines should be including the default colors in their app.
  - MrJohz 3y ago
    I agree that you don't need the default colours, and in fairness this is one of the things that Tailwind fairly explicitly encourages. That said, I also used to use "primary"/"secondary"/etc names for the colours, but since using Tailwind, I've been using colour names directly (e.g. "blue" or for fancier design systems "mirage-blue" or whatever their name for their specific custom blue is). I find it's helped for a few reasons, but the big one is just that it's easier to keep the colours in my head - I'm not thinking in terms of "tertiary-alt-3" or something, I'm looking at a design and going "that's green, which green? This green". I have more discussions talking about colours in terms of the standard English colour names than I do in terms of those colours' purposes in the design system, so the colour names seem more practical. That said, I agree that spending some time switching the colours to whatever design system you're using us very useful. Another trick I've found is starting off a project just using raw CSS values (the `p-[8px]` syntax), and then when the basic designs are done based on whatever the designer has sent, getting a list of all the custom classes you've got and using this to define what the standard units are. This is helpful when the design guide isn't specific on these details, and the designer is being more freeform.
    - nwienert 3y ago
micromacrofoot 3y ago
I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties. Instead of .f-green in your HTML you can do --f-green in your CSS. <header class="f-green"></header> would become header { color: var(--f-green); } or if you really hate CSS and must stay in HTML <header style="var(--f-green)"></header> Though the literal naming is a touch too specific anyway. Something like this is wonderful: --f1-color: green; header { color: var(--f1-color); } then you don't have to do confusing things like header .f-green { color: red; } because you can do header { --f1-color: red; } So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do: footer { --f1-color: green; } We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.

123 points by jacobr 3y ago

I will always argue against this. Keep your layout in one file and your styling in another. I've done more CSS than most in heavy web production and I never once had a reason to think something like this would be faster or more efficient.

city41 3y ago
I've been a web developer for about 15 years now and I absolutely love Tailwind. I find it so much faster and efficient that it is really aptly named.
jermaustin1 3y ago
CSS Utility classes are "faster" and that is the draw, but once they have been overused and abused, then you are either stuck with them, or you spend a lot of time cleaning the tech debt and rewriting the css properly. At my current job, I work on a legacy application which is still actively developed and released. I spend a lot of my time cleaning up inline styles, styles that are applied via javascript calls, and style blocks on individual pages. I wish the inline styles would have been utility classes, because at least then they would be easy to find and replace, instead, there are "margin-top: 3px" and "margin: 4px 0 0" and "padding-top: 2px" and dozens of variations on that that had they just done something like ".mt-small { margin-top: 3px }" there wouldn't be so many variations and inconsistent looking pages. This company would have benefited greatly from Bootstrap or Tailwinds. I hate both of those, but there is no denying how easy they are to use and abuse.
stevebmark 3y ago
Say more. What's the distinction between layout and style?

i0nutzb 3y ago

Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...

matheusmoreira 3y ago
Yeah. It's essentially a less verbose form of per-element style="..." attributes. It's weird to me that this is considered the state of the art today.
deleted 3y ago
[deleted]
BasilPH 3y ago
Why do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice examples. MDN is great, but with Tailwind I get reasonable presets. - TailwindUI: Saves me a lot of time and looks good without feeling as generic as bootstrap.
- haydenchambers 3y ago
  [dead]
- hipadev23 3y ago
  My gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a <table> with a whole host of <td> elements, those repeated class definitions become quite tedious.
  - colejohnson66 3y ago
    Use PostCSS: .myFancyTable td { @apply p-4; } The advantage of Tailwind, IMO, is that styles for one-off components (like a breadcrumb bar) can just be written inline instead of in a separate file. But reused components like table cells should be using CSS selectors.
    - 3y ago

Brajeshwar 3y ago

This is what I did before stumbling on BEM - https://en.bem.info/methodology/css/ https://en.bem.info/methodology/css/

munk-a 3y ago
Now that you're familiar with BEM you can use the perfect css approach `.page__inner__title-f-green {color:#0f0;}` imagine the portability!
- nailer 3y ago
  Or you can call the login box “.login” and style it.
  - LoganDark 3y ago
    Or you can have fun
    - Muromec 3y ago
      Only when you don't live in SV. There you can't have the concept of fun.

cantSpellSober 3y ago

Yep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap. Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.

city41 3y ago
What was the first "official" atomic css framework? I believe it was atomic.css[0]? In this style of css, tailwind is very much a latecomer. [0]https://acss.io/ https://acss.io/
jamesmccann 3y ago
I think Tachyons struck the balance to be honest. Tailwind's "functions" and combinations seem to allow a higher level of complexity where it becomes difficult to quickly inspect a class block after some time has passed.

tuyiown 3y ago

So visionary to be considered a wtf. Thanks for the submission, made my day !

deleted 3y ago
[deleted]
city41 3y ago
Me too. This is really quite amazing in a small way. It really made me laugh.

draw_down 3y ago

[dead]

munk-a 3y ago

It's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability. Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!

agloe_dreams 3y ago
This was the only bit in tailwind we modified a lot in our Config. You really need to remove the default colors and define them as [Primary, Secondary, Neutral, Warning, Error, Success] and then add variants of each. Then it really works. I honestly think this should be a default config change/setup option in TW. Nobody with a Design System/Brand guidelines should be including the default colors in their app.
- MrJohz 3y ago
  I agree that you don't need the default colours, and in fairness this is one of the things that Tailwind fairly explicitly encourages. That said, I also used to use "primary"/"secondary"/etc names for the colours, but since using Tailwind, I've been using colour names directly (e.g. "blue" or for fancier design systems "mirage-blue" or whatever their name for their specific custom blue is). I find it's helped for a few reasons, but the big one is just that it's easier to keep the colours in my head - I'm not thinking in terms of "tertiary-alt-3" or something, I'm looking at a design and going "that's green, which green? This green". I have more discussions talking about colours in terms of the standard English colour names than I do in terms of those colours' purposes in the design system, so the colour names seem more practical. That said, I agree that spending some time switching the colours to whatever design system you're using us very useful. Another trick I've found is starting off a project just using raw CSS values (the `p-[8px]` syntax), and then when the basic designs are done based on whatever the designer has sent, getting a list of all the custom classes you've got and using this to define what the standard units are. This is helpful when the design guide isn't specific on these details, and the designer is being more freeform.
  - nwienert 3y ago

micromacrofoot 3y ago

I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties. Instead of .f-green in your HTML you can do --f-green in your CSS. <header class="f-green"></header> would become header { color: var(--f-green); } or if you really hate CSS and must stay in HTML <header style="var(--f-green)"></header> Though the literal naming is a touch too specific anyway. Something like this is wonderful: --f1-color: green; header { color: var(--f1-color); } then you don't have to do confusing things like header .f-green { color: red; } because you can do header { --f1-color: red; } So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do: footer { --f1-color: green; } We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.