4 ms·

When I saw the Tailwind example, the first thing that came to mind was... "Wasn't CSS supposed to decouple presentation from content"? Because this sure looks l

by jmmv 4y ago

When I saw the Tailwind example, the first thing that came to mind was... "Wasn't CSS supposed to decouple presentation from content"? Because this sure looks like going back to <font> tags and style="" attributes everywhere.

samwillis 4y ago
"Separation of concerns" often results is code rot and harder to main codebases. Placing the styles, js and HTML for a "component" in close proximity helps to reduce this and can in my experience make development significantly quicker. Separate css style sheets make sense for "document" web pages, but for "applications" I have found keeping the style close to, or inline with, the HTML much better. Personally I prefer the concept of the "single file component" popularised by Vue. Having one file that contain the js, HTML and css in close proximity but not on top of each other works really well. A common phrase used to describe this is "locality of behaviour".
- greenie_beans 4y ago
  yeah i've never been a fan of separating html, css, and javascript. it's a dogma that doesn't work well for frontend development.
tlrobinson 4y ago
That made sense for documents, and maybe even web apps before the rise of component-based web libraries that make it easier to collocate HTML, JS, and styles in reusable components.
- TeMPOraL 4y ago
  It didn't make sense even for documents. A document usually cannot be cleanly factored into content independent from presentation - the border between the two is fuzzy, and there's always some bleed-through. You could say, perfect is the enemy of good, with almost every document you could easily get 95% there. That's true - but that 5% made the whole idea into a leaky abstraction. The more strict you were about the separation of content and presentation, the harder it got to deal with the 5% that were both - and back then, people were dogmatic about this. Many of us here probably remember the CSS Zen Garden[0] - the site that demonstrated just how far you can go with CSS if you keep the content and styling separate. I used to be in love with this, but now I think the site did incredible damage to web developers of that era: by getting people excited about flexibility of CSS, it made people forget that any particular site they're building is not going to have 20 alternate stylesheets to choose from - rather, it's going to have one, and the content on that site will be created with a specific presentation form in mind. Devs and designers ended up chasing half-formed visions of what could be, without realizing those visions made no sense in practice. (This of course doesn't mean that doing HTML and CSS in JS is a better idea. It's also a bad fad, just for different reasons.) -- [0] - https://en.wikipedia.org/wiki/CSS_Zen_Garden https://en.wikipedia.org/wiki/CSS_Zen_Garden
rendall 4y ago
Agreed. Every generation repeats the mistakes of the past, and every time "this time it's different". This time it's different because components. I'm still well-disposed towards Tailwind and it provides ways to handle this. I was just amused that the example was so bad.
kaba0 4y ago
But CSS has almost never been decoupled from content. Yeah, there is zen-garden, but no real world CSS would be applicable to a different website just as is. They depend on the exact html structure, what is inside what, etc. If you add this to the fact that you would actually write a <Component> and only specifically style that “inline” once, then you are actually better off with tailwind.

by jmmv 4y ago

samwillis 4y ago

"Separation of concerns" often results is code rot and harder to main codebases. Placing the styles, js and HTML for a "component" in close proximity helps to reduce this and can in my experience make development significantly quicker. Separate css style sheets make sense for "document" web pages, but for "applications" I have found keeping the style close to, or inline with, the HTML much better. Personally I prefer the concept of the "single file component" popularised by Vue. Having one file that contain the js, HTML and css in close proximity but not on top of each other works really well. A common phrase used to describe this is "locality of behaviour".

greenie_beans 4y ago
yeah i've never been a fan of separating html, css, and javascript. it's a dogma that doesn't work well for frontend development.

tlrobinson 4y ago

That made sense for documents, and maybe even web apps before the rise of component-based web libraries that make it easier to collocate HTML, JS, and styles in reusable components.

TeMPOraL 4y ago
It didn't make sense even for documents. A document usually cannot be cleanly factored into content independent from presentation - the border between the two is fuzzy, and there's always some bleed-through. You could say, perfect is the enemy of good, with almost every document you could easily get 95% there. That's true - but that 5% made the whole idea into a leaky abstraction. The more strict you were about the separation of content and presentation, the harder it got to deal with the 5% that were both - and back then, people were dogmatic about this. Many of us here probably remember the CSS Zen Garden[0] - the site that demonstrated just how far you can go with CSS if you keep the content and styling separate. I used to be in love with this, but now I think the site did incredible damage to web developers of that era: by getting people excited about flexibility of CSS, it made people forget that any particular site they're building is not going to have 20 alternate stylesheets to choose from - rather, it's going to have one, and the content on that site will be created with a specific presentation form in mind. Devs and designers ended up chasing half-formed visions of what could be, without realizing those visions made no sense in practice. (This of course doesn't mean that doing HTML and CSS in JS is a better idea. It's also a bad fad, just for different reasons.) -- [0] - https://en.wikipedia.org/wiki/CSS_Zen_Garden https://en.wikipedia.org/wiki/CSS_Zen_Garden

rendall 4y ago

Agreed. Every generation repeats the mistakes of the past, and every time "this time it's different". This time it's different because components. I'm still well-disposed towards Tailwind and it provides ways to handle this. I was just amused that the example was so bad.

kaba0 4y ago

But CSS has almost never been decoupled from content. Yeah, there is zen-garden, but no real world CSS would be applicable to a different website just as is. They depend on the exact html structure, what is inside what, etc. If you add this to the fact that you would actually write a <Component> and only specifically style that “inline” once, then you are actually better off with tailwind.