Hacker News Reader

Comment by warpech | Hacker News Reader

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.

View on HN

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.

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

PHP came out in 1995, the same year as CSS.

> What do you mean by 'worse is good'?

I meant this phrase as in 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.

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.

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.

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

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?

https://web.dev/learn/css/ from Google seems pretty good

> 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

If you are referring to grid, this is much more powerful than table, for example it decouples the visual order from the structural order.

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

Yeah IE6 being abandonware held back the web for a decade, no doubt about that.

But it was not CSS that had trouble catching up, it was a deliberate strategy by Microsoft because they considered the web a threat to its desktop dominance.

Sure, the CSS standard supported CSS tables since the IE6 days, but IE6 didn’t support CSS tables. It wasn’t until IE8 had a decent browser share, around 2011, that it was feasible to use CSS tables. Even here, there were still enough IE6 and IE7 users that I still had stuff like this on my website in 2011:

  <!--[if lt IE 8]>
  <table><tr>
  <td width=640 valign=top>
  <![endif]-->

There was a huge disconnect between what the standards documents supported and what browsers actually supported. There’s a reason they made that “smiley face” Acid2 test in the mid-2000s, because standards support was so bad back then: http://acid2.acidtests.org/ — https://en.wikipedia.org/wiki/Acid2

Yeah IE6 held back the web for a long time, no question.

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.

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.

There's also one for portrait/landscape, and for print view. Amazing.

And many more!

https://tailwindcss.com/docs/hover-focus-and-other-states

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.

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

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.

Sounds like this "config" (which is what, some preprocessor that generates your actual markup?) is what's actually doing all the work.

Yep, and that’s the point.

If your point is "I can write some code to output HTML with the appropriate styling" then... yes, but at that point why use HTML as the input format? (Because you can edit it in an HTML editor? Yes, but you undermine that if your styling isn't working at that point, in the same way as the Apache SSI problem described in the article). I think the article is talking about the kind of HTML that gets rendered by a web browser rather than the kind that's used as an internal representation in some other system.

When I write layout, I do it in a way that requires as little new css as possible. To do that, I rely on one liners that do the heavy lifting. When I was new, I would assign a class to a div, then write the padding and margins for that class. I would try to make general classes, like a class I can assign to all buttons, but I didn't have the right mindset.

Now, I can define my flex boxes, vertical flex boxes in a snap. Apply one of several common padding and margins to an element in a one-liner. Throw "vertical-center" onto an element to make it align-items:center. 80% of the layout I need to do can be composed in one shot without new css. Then I can make fine-tune adjustments using variables.

I don't remember what the exact text of any of the 4 box shadows I use. I know I apply two shadows (one shallow dark one and one further light one), but I couldn't tell you what the opacity is on either. I don't need to. I either apply it in the class or @extend .shadow-1;

OK, so what's the thing that actually does this? Clearly you're not talking about CSS as implemented in the browser, the thing that the article and this comment are about, because "@extend .shadow-1;" is not CSS syntax. And assuming that thing is some kind of processor that generates HTML/CSS, what do you gain from having the input to this processor be pseudo-HTML/pseudo-CSS rather than whatever format is most suitable for expressing things?

You don't know what sass/scss is and you're expressing your opinions on stylesheets?

I know several different things that use a syntax like what you quoted. What I don't know is what workflow you're advocating or what you're trying to say at all.

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.

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.

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

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.

Reply on news.ycombinator.com