5 ms·

I wouldn't be surprised if this ended with a smirky one-liner presented in a popular CSS framework, making a full circle from (early HTML): <H1><FONT COLOR=

I wouldn't be surprised if this ended with a smirky one-liner presented in a popular CSS framework, making a full circle from (early HTML): <H1><FONT COLOR=red>...</FONT></H1> to (Tailwind CSS) <h1 class="text-red-500">...</h1> I totally acknowledge the accomplishments that the Web standards and their implementations have made since the early days. On the other hand, while I am no Tailwind proponent, for many applications "worse is good" and Tailwind is a bridge to the straightforward beginnings of the web design.

Dangcancer 5y ago
Everyone knows Tailwind is a garbage library for garbage developers.
deleted 5y ago
[deleted]
deleted 5y ago
[deleted]
iratewizard 5y ago
Remember that text-red-500 can be changed in one place across the application and allows you to apply general design ideas to quickly build layout. I don't personally use anything like tailwind, but the self-rolled css library I do use has a whole section of one liners like "flex" or "vertical-center" that saves me hours.
- lmm 5y ago
  > Remember that text-red-500 can be changed in one place across the application What, so that it actually means blue and 400? That doesn't sound good for maintainability.
  - colejohnson66 5y ago
    That’s an odd concern. Programmers have always been able to rework things maliciously. I can redefine console.log to wipe your hard drive if I wanted to. Redefining “red” is for if you want to tweak the shade. For example, changing it from ff0000 (or whatever) to, say, cc0000. Then all the darkness values (100-900) update automatically. If “red-500” is your company color, it should be redefined in your config as “company” and write “text-company-500”. That way, if your company branding changes, you don’t have to “hack” red-500 to be blue-400; you just change the definition of “company”. They’re basically CSS variables.
    - lmm 5y ago
      Sounds like this "config" (which is what, some preprocessor that generates your actual markup?) is what's actually doing all the work.
      - colejohnson66 5y ago
        The “config” is just tailwind.config.json next to your package.json. The most basic file is literally just: module.exports = {} That alone gives you all the Tailwind defaults. But it’s customizable to infinity. tailwindcss.com’s documentation on individual classes is extensive on customization.
        lmm 5y ago
        OK but you still haven't given any example of the part that actually does something, the part where you somehow go from "text-company-500" to red and whatever.
        colejohnson66 5y ago
        Why? We're discussing Tailwind in this thread. If you aren't aware that Tailwind isn't just the classes, but also a CSS preprocessor, we can't have a productive conversation. But if you insist: https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles There you can see that the example config file there defines custom colors (which could be your company branding colors). They don't have to be named actual colors; I could use `"mygreen": "#8FB68F"` (random color I just generated) if I so desired. Then, during my website's build process (into static HTML), any usages of "text-mygreen-500", for example (colors are 100-900), will generate a CSS selector automagically.
        lmm 5y ago
        We're discussing how to set up a maintainable website where you can do things like change your company's brand colour from red to blue in one place and apply that consistently across your website. "Use Tailwind" isn't an answer to that any more than "Use CSS" or "Use HTML" is.
wildrhythms 5y ago
What do you mean by 'worse is good'? Remember the 'separation of concerns' wrt HTML/CSS was at a time when JSX, lit-html, web components et al did not exist. There was no easy way on the front end to do something like this: function PrimaryHeader({children}){ return <h1 className="text-red-500">{children}</h1> } <PrimaryHeader>...</PrimaryHeader> Thus, the 'separation of concerns' and many thousands of hours of developer toil ensued to both completely separate, yet still closely bind, style to markup by way of class names. There's no point to have a .PrimaryHeader class in a world of web components and atomic CSS (Tachyons, Tailwind, etc.) Even absent of an atomic CSS library, I still prefer inline CSS to making up arbitrary class names; my entire codebase can be JSX files, and every component is self encapsulating. I don't see this as 'worse' in any way.
- tomnipotent 5y ago
  > There's no point to have a .PrimaryHeader class Having recently dabbled with Tailwinds, I can't express how nice it is to have control over most styling within the JSX/HTML without having to jump between CSS class definitions. At just a glance from the class names I can figure out what everything is doing, and it feels much more productive.
- IAmEveryone 5y ago
  PHP came out in 1995, the same year as CSS.
- warpech 5y ago
  > What do you mean by 'worse is good'? I meant this phrase as in https://en.m.wikipedia.org/wiki/Worse_is_better https://en.m.wikipedia.org/wiki/Worse_is_better. Generally, we now have awesome levels of abstraction available for developers (and counting, for example see CSS Logical Properties). On the other hand, for simple solutions, less abstraction is the way to go. Luckily, there is still inline style for that.
mcntsh 5y ago
What if you want it to be red on hover? hover:text-red-500 What about just at the medium breakpoint? md:text-red-500 Only in dark mode? dark:text-red-500 Tailwind is much more powerful than inline styles.
- joshxyz 5y ago
  There's also one for portrait/landscape, and for print view. Amazing.
  - mcntsh 5y ago
    And many more! https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states
deleted 5y ago
[deleted]
kumarvvr 5y ago
Technically, the choices are vastly more improved now. You could always have a global style variable in a framework like react, that in the end renders the "text-red-500" part. Changes are pretty easy too. And, React has been the framework that brought this new paradigm to the forefront. The amalgamation of programming and UI design. As long as designers were at the helm of web-sites, we had tools like Adobe Dreamweaver. Once programmers were forced to do UI stuff, we had stuff like React / Vue / Angular on the horizon. I now realize that HTML is a platform. No human should ever directly write an HTML file. We must build software that builds HTML.
- IAmEveryone 5y ago
  I realize the "in the horizon" is hedging for this reply, but I just had to mention that there was about a decade in-between where Dreamweaver was absolete and yet React / Vue / Angular were just random (non-)words.
lmm 5y ago
> I totally acknowledge the accomplishments that the Web standards and their implementations have made since the early days. I don't. It's taken all this time for CSS to catch up with table-based layouts, and it still doesn't really offer significant advantages if you're generating your markup from code (which we all are now). Video and audio tags are not noticeably better than HTML3-style embed; indeed in practice they're worse for the user (all that autoplaying video on news sites). CSS exists to make it easier to DRY your hand-written HTML, which no-one does anymore. It's time to kill it.
- icedchai 5y ago
  At least we don't have to use 1x1 spacer gifs anymore? Though I hated doing that, I did find table-based layouts easier to understand. On a related note, can anyone recommend a good CSS book or tutorial?
  - Recursing 5y ago
    https://web.dev/learn/css/ https://web.dev/learn/css/ from Google seems pretty good
- goto11 5y ago
  > It's taken all this time for CSS to catch up with table-based layouts CSS supported table-based layouts since CSS 2.0 which is more than 20 years old at this point. See: https://www.w3.org/TR/2008/REC-CSS2-20080411/tables.html https://www.w3.org/TR/2008/REC-CSS2-20080411/tables.html If you are referring to grid, this is much more powerful than table, for example it decouples the visual order from the structural order.
  - lmm 5y ago
    > CSS supported table-based layouts since CSS 2.0 which is more than 20 years old at this point. IE only supported them from v8, so more like 10 years old in practice (a lot of CSS 2.x was "standardised" before it was implemented, and some of it turned out to not even be possible to implement). Though I was actually thinking of flexbox rather than table-layout, though I don't remember what (if any) the difference was.
Abishek_Muthian 5y ago
I share your opinion, But I would also like to mention that those "worse is good" applications are limited to certain niche. I prefer vanilla HTML, CSS and minimal or no JS websites and my audience to a large part don't mind either and as long as I keep building to such niche audience then it's fine. But if I try to compete in a market where the audience expect shiny layouts, fresh animations and don't mind waiting a minute for those to load; with a late 90s-esque website then I will certainly fail.

Dangcancer 5y ago

Everyone knows Tailwind is a garbage library for garbage developers.

deleted 5y ago

[deleted]

deleted 5y ago

[deleted]

iratewizard 5y ago

Remember that text-red-500 can be changed in one place across the application and allows you to apply general design ideas to quickly build layout. I don't personally use anything like tailwind, but the self-rolled css library I do use has a whole section of one liners like "flex" or "vertical-center" that saves me hours.

lmm 5y ago
> Remember that text-red-500 can be changed in one place across the application What, so that it actually means blue and 400? That doesn't sound good for maintainability.
- colejohnson66 5y ago
  That’s an odd concern. Programmers have always been able to rework things maliciously. I can redefine console.log to wipe your hard drive if I wanted to. Redefining “red” is for if you want to tweak the shade. For example, changing it from ff0000 (or whatever) to, say, cc0000. Then all the darkness values (100-900) update automatically. If “red-500” is your company color, it should be redefined in your config as “company” and write “text-company-500”. That way, if your company branding changes, you don’t have to “hack” red-500 to be blue-400; you just change the definition of “company”. They’re basically CSS variables.
  - lmm 5y ago
    Sounds like this "config" (which is what, some preprocessor that generates your actual markup?) is what's actually doing all the work.
    - colejohnson66 5y ago
      The “config” is just tailwind.config.json next to your package.json. The most basic file is literally just: module.exports = {} That alone gives you all the Tailwind defaults. But it’s customizable to infinity. tailwindcss.com’s documentation on individual classes is extensive on customization.
      - lmm 5y ago
        OK but you still haven't given any example of the part that actually does something, the part where you somehow go from "text-company-500" to red and whatever.
        colejohnson66 5y ago
        Why? We're discussing Tailwind in this thread. If you aren't aware that Tailwind isn't just the classes, but also a CSS preprocessor, we can't have a productive conversation. But if you insist: https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/adding-custom-styles There you can see that the example config file there defines custom colors (which could be your company branding colors). They don't have to be named actual colors; I could use `"mygreen": "#8FB68F"` (random color I just generated) if I so desired. Then, during my website's build process (into static HTML), any usages of "text-mygreen-500", for example (colors are 100-900), will generate a CSS selector automagically.
        lmm 5y ago
        We're discussing how to set up a maintainable website where you can do things like change your company's brand colour from red to blue in one place and apply that consistently across your website. "Use Tailwind" isn't an answer to that any more than "Use CSS" or "Use HTML" is.

wildrhythms 5y ago

What do you mean by 'worse is good'? Remember the 'separation of concerns' wrt HTML/CSS was at a time when JSX, lit-html, web components et al did not exist. There was no easy way on the front end to do something like this: function PrimaryHeader({children}){ return <h1 className="text-red-500">{children}</h1> } <PrimaryHeader>...</PrimaryHeader> Thus, the 'separation of concerns' and many thousands of hours of developer toil ensued to both completely separate, yet still closely bind, style to markup by way of class names. There's no point to have a .PrimaryHeader class in a world of web components and atomic CSS (Tachyons, Tailwind, etc.) Even absent of an atomic CSS library, I still prefer inline CSS to making up arbitrary class names; my entire codebase can be JSX files, and every component is self encapsulating. I don't see this as 'worse' in any way.

tomnipotent 5y ago
> There's no point to have a .PrimaryHeader class Having recently dabbled with Tailwinds, I can't express how nice it is to have control over most styling within the JSX/HTML without having to jump between CSS class definitions. At just a glance from the class names I can figure out what everything is doing, and it feels much more productive.
IAmEveryone 5y ago
PHP came out in 1995, the same year as CSS.
warpech 5y ago
> What do you mean by 'worse is good'? I meant this phrase as in https://en.m.wikipedia.org/wiki/Worse_is_better https://en.m.wikipedia.org/wiki/Worse_is_better. Generally, we now have awesome levels of abstraction available for developers (and counting, for example see CSS Logical Properties). On the other hand, for simple solutions, less abstraction is the way to go. Luckily, there is still inline style for that.

mcntsh 5y ago

What if you want it to be red on hover? hover:text-red-500 What about just at the medium breakpoint? md:text-red-500 Only in dark mode? dark:text-red-500 Tailwind is much more powerful than inline styles.

joshxyz 5y ago
There's also one for portrait/landscape, and for print view. Amazing.
- mcntsh 5y ago
  And many more! https://tailwindcss.com/docs/hover-focus-and-other-states https://tailwindcss.com/docs/hover-focus-and-other-states

deleted 5y ago

[deleted]

kumarvvr 5y ago

Technically, the choices are vastly more improved now. You could always have a global style variable in a framework like react, that in the end renders the "text-red-500" part. Changes are pretty easy too. And, React has been the framework that brought this new paradigm to the forefront. The amalgamation of programming and UI design. As long as designers were at the helm of web-sites, we had tools like Adobe Dreamweaver. Once programmers were forced to do UI stuff, we had stuff like React / Vue / Angular on the horizon. I now realize that HTML is a platform. No human should ever directly write an HTML file. We must build software that builds HTML.

IAmEveryone 5y ago
I realize the "in the horizon" is hedging for this reply, but I just had to mention that there was about a decade in-between where Dreamweaver was absolete and yet React / Vue / Angular were just random (non-)words.

lmm 5y ago

> I totally acknowledge the accomplishments that the Web standards and their implementations have made since the early days. I don't. It's taken all this time for CSS to catch up with table-based layouts, and it still doesn't really offer significant advantages if you're generating your markup from code (which we all are now). Video and audio tags are not noticeably better than HTML3-style embed; indeed in practice they're worse for the user (all that autoplaying video on news sites). CSS exists to make it easier to DRY your hand-written HTML, which no-one does anymore. It's time to kill it.

icedchai 5y ago
At least we don't have to use 1x1 spacer gifs anymore? Though I hated doing that, I did find table-based layouts easier to understand. On a related note, can anyone recommend a good CSS book or tutorial?
- Recursing 5y ago
  https://web.dev/learn/css/ https://web.dev/learn/css/ from Google seems pretty good
goto11 5y ago
> It's taken all this time for CSS to catch up with table-based layouts CSS supported table-based layouts since CSS 2.0 which is more than 20 years old at this point. See: https://www.w3.org/TR/2008/REC-CSS2-20080411/tables.html https://www.w3.org/TR/2008/REC-CSS2-20080411/tables.html If you are referring to grid, this is much more powerful than table, for example it decouples the visual order from the structural order.
- lmm 5y ago
  > CSS supported table-based layouts since CSS 2.0 which is more than 20 years old at this point. IE only supported them from v8, so more like 10 years old in practice (a lot of CSS 2.x was "standardised" before it was implemented, and some of it turned out to not even be possible to implement). Though I was actually thinking of flexbox rather than table-layout, though I don't remember what (if any) the difference was.

Abishek_Muthian 5y ago

I share your opinion, But I would also like to mention that those "worse is good" applications are limited to certain niche. I prefer vanilla HTML, CSS and minimal or no JS websites and my audience to a large part don't mind either and as long as I keep building to such niche audience then it's fine. But if I try to compete in a market where the audience expect shiny layouts, fresh animations and don't mind waiting a minute for those to load; with a late 90s-esque website then I will certainly fail.