7 ms·

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. L

I've gone through the following phases: 1. Write old school circa 2008 CSS. 2. Oh shit, it's a real pain in the ass to do layout and make a responsive grid. Let me use a framework. Sweet! 3. Hmm.. its kinda painful to write css selectors all day long. They're reusable but I am having to get out of comfy JS IDE setup to go change some CSS properties in a different file. 4. Tailwind arrives. OMG. This is awesome! Never have to leave the context. Just stack properties as you like and compose your components! 5. HTML looks completely unreadable. It's a goddamn mess. 6. I want to go back to 2005. No frameworks. Just write non-responsive CSS, one for each screen (yeah, you read that right. I don't want to compromise the layout for responsiveness. I'd rather handcraft one for each device size give or take a few pixels). Custom crafted like a piece of fine art. CSS grid/layout is a lot better with css grid and flexbox. Things have improves since the 960-grid days. No frameworks at all and its fucking liberating. Edit: I currently use reset/reboot css to clean up default rendering + sass (only use variables + mixins). I am happy like a daisy.

fevangelou 6y ago
Amen, brother!
dubcanada 6y ago
What benefit does having completely readable HTML offer?
- chrisan 6y ago
  The same benefit as any language you program in. Readability (not saying tailwind is hard, but it can be messy) is one of the most important things I look for.
  - dawnerd 6y ago
    If you use prettier or similar readability isn't an issue. I'd argue readability is improved since you can tell right away how an element is going to be displayed vs having to open up the css and look there.
- saagarjha 6y ago
  What benefit does laying out your circuits cleanly offer? It's pride in your work, a tacit invitation for people who aren't you to look at it. From a functional perspective, does it matter? No, it doesn't really. But it might help you sleep better at night.
- CaptArmchair 6y ago
  Why? Because it makes the document readable... for machines. You may think about browsers, but if your HTML is a mess, devices that translate content into Braille or read it as audio, won't be able to make sense of it. That might not sound like a problem, but this might very well cause legal issues in some business cases (e.g. people with an impairment can't access a website of a public administration? That might be a civil rights violation in some countries). Another reason is because it makes it easier to extract data and information from HTML documents: search engines and search spiders. If your HTML is a mess, you're going to take a SEO hit. That's just two concrete concerns that come to my mind right now. HTML and CSS today are mostly used for presentational & interactive purposes: push UI components in there right place, with the desired shapes, colours, fonts, animations and so on, in order to build complex interactive applications. But HTML wasn't originally conceived for that purpose. The word "markup" says all you need to know. The entire purpose of a HTML tag was simply to describe the structure of a text document: this bit here is the header, that bit is a paragraph, the next bit contains an image, and here are a few meta tags with extra information about the document you're reading. However, as markets drove demand for more and more interactivity - applications in browsers rather then just static documents - browser technologies including HTML evolved beyond the original scope of "marking up text documents". That original design foundation is still there: marking the content structure of a document through HTML tags, though. The problem is that developers want to cater to demands to build these nice fancy UI experiences that need to be rendered perfectly on various devices. And so, the original intent of HTML goes right out of the window. What's left is an unreadable mess of spaghetti HTML, mangled DOM's with non-sensical auto-generated CSS classes to which one needs compilers and transpilers and entire toolchains as you write your CSS in an entirely abstracted fashion. When you're building a complex interactive application for the browser. That's just the current state of affairs one will have to accept. Presently, you're still, in essence, using tools that originally never were designed for that purpose. However, if you're just going to build a simple blog or a site with static content, it pays dividends to think about the structure of your content, consider the semantics of your HTML and the CSS classes you're going to use. Using pure CSS, you could then easily write lean, performant and understandable stylesheets that don't need to be processed by complex toolchains. And you certainly wouldn't need complex frameworks to build a website. Of course, YMMV, and so there's definitely a market for Tailwind and their ilk. I do think that developers should learn about "golden hammer" syndrome early in their career: while frameworks make your life as a developer easier, they aren't the best choice in all use cases. From the perspective of a "body shopping" business, it makes sense to standardize the process as much as possible and fall back to a few well known tools and practices with repeatable - and therefore measurable - outcomes. In the same vain, the big trade off here is providing any form sanity/clarity when someone hits the "browse source" button in there browser.
damnencryption 6y ago
You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.
- systemvoltage 6y ago
  I could use sass to do the same.
  - damnencryption 6y ago
    Yes. You can use tailwind with sass as well though it's not recommended. Think of tailwind as a framework for all your styling needs while sass is more a functional language to generate CSS for you.
  - propelol 6y ago
    Partially. You'll lose the system Tailwind gives you, which makes it easier to be consistent.
    - systemvoltage 6y ago
      I handcraft that system myself. It's like buy Ikea furniture and assembling it vs. having your own woodworking shop to handcraft furniture with precise requirements. These frameworks have made me lazy. I think CSS design is pretty much exactly the same as any craftsmanship job - there is so much pleasure from building it from the ground up. No, I still get the knots in the wood out by using reset.css. Also, I try to not use class selectors as much as possible. HTML looks sterile and spartan with only a handful of span tags or id tags for very specialized targetted changes. I can see why people use frameworks - its fast and quick. But you lose personality in the outcome.
- bnt 6y ago
  The exact problem is the 99% of people who DON’T do this and their markup ends up a Frankenstein’s monstrosity. I don’t know if it’s the new crop of front-end “developers” who don’t know the very basics or just hipsters being hipsters and YOLO all the things. Tailwind (IMHO) promotes bad practices and needs to explicitly state that you SHOULD use @apply or a puppy somewhere will die.
ktpsns 6y ago
I miss CSS compilers like SCSS/LESS on your vita ;-) Basically the best way to do CSS I ever worked with was using Bootstrap the LESS way. You could use a sean HTML code with semantic (=speaking) class names and basically do the mapping to bootstrap classes within LESS. This was subsequently compiled to short CSS code. The best of all worlds. I guess the CSS framework SemanticUI has a similar idea in mind. However, most people use it in the same way as Tailwind. This is web technology as it was done 10+ years ago, when people mixed markup and styling. It's a pity that young folks don't know...
mahesh_rm 6y ago
Similar curve. I found my optimal trade-off with tachyons.css.
kilroy123 6y ago
I did the same thing for a recent side project. Only I still use sass.
jonoc 6y ago
The problem I have with pure CSS is it relies on the fact that you and your team are experts at CSS, which is almost never the case. Pure CSS with an unexperienced developer can lead to spaghetti pretty quick. There are always limitations with any approach, including frameworks, but on a team with more than 1 developer and long term maintenance in mind I'd prefer to go with a framework more times than not.
- lambda_obrien 6y ago
  I'm tired of this argument: train your devs for the job you have for them, or if they're not trainable, then find them another position not doing stuff they are incapable of. We're engineers, let's act like it and know our goddamn stuff, not dumb it down to the LCD.
  - Scarbutt 6y ago
    Blame companies and job titles like 'Full Stack Dev'
  - mattgreenrocks 6y ago
    This feels like the story of a lot of web tooling: accessibility over all else, especially performance/future maintenance. The fail-fast/move fast and break things culture of some startups bleeds into the aesthetics of tools. Knowledge of tools begins to be confused with skills. Ironically, it burdens new devs heaviest, as they're not able to sort through which concepts/abstractions that tools bring with them are worthwhile, and which are not. It drove me away from the platform entirely. (This isn't about Tailwind, I've never used it, so I can't comment on it.)
tarkin2 6y ago
1. this is a pain. 2. i'll write an abstraction 3. the abstraction is a pain
mhoad 6y ago
This is basically exactly what I get out of writing web components. I get the best of every possible dimension I care about. I can write short neat little snippets of code that encapsulates my HTML, CSS and JavaScript in a single place. I can do it just using really simple CSS because it is all scope, I can actually build reusable components, I’m using the native web platform (though I do recommend lit-element as well) and I can do all using modern tooling and JS and all of the benefits that brings.
ChrisArchitect 6y ago
amen. Not comprompsing layout for responsiveness... things have improved since the 960-grid days. (you've been around!) Amen.

fevangelou 6y ago

Amen, brother!

dubcanada 6y ago

What benefit does having completely readable HTML offer?

chrisan 6y ago
The same benefit as any language you program in. Readability (not saying tailwind is hard, but it can be messy) is one of the most important things I look for.
- dawnerd 6y ago
  If you use prettier or similar readability isn't an issue. I'd argue readability is improved since you can tell right away how an element is going to be displayed vs having to open up the css and look there.
saagarjha 6y ago
What benefit does laying out your circuits cleanly offer? It's pride in your work, a tacit invitation for people who aren't you to look at it. From a functional perspective, does it matter? No, it doesn't really. But it might help you sleep better at night.
CaptArmchair 6y ago
Why? Because it makes the document readable... for machines. You may think about browsers, but if your HTML is a mess, devices that translate content into Braille or read it as audio, won't be able to make sense of it. That might not sound like a problem, but this might very well cause legal issues in some business cases (e.g. people with an impairment can't access a website of a public administration? That might be a civil rights violation in some countries). Another reason is because it makes it easier to extract data and information from HTML documents: search engines and search spiders. If your HTML is a mess, you're going to take a SEO hit. That's just two concrete concerns that come to my mind right now. HTML and CSS today are mostly used for presentational & interactive purposes: push UI components in there right place, with the desired shapes, colours, fonts, animations and so on, in order to build complex interactive applications. But HTML wasn't originally conceived for that purpose. The word "markup" says all you need to know. The entire purpose of a HTML tag was simply to describe the structure of a text document: this bit here is the header, that bit is a paragraph, the next bit contains an image, and here are a few meta tags with extra information about the document you're reading. However, as markets drove demand for more and more interactivity - applications in browsers rather then just static documents - browser technologies including HTML evolved beyond the original scope of "marking up text documents". That original design foundation is still there: marking the content structure of a document through HTML tags, though. The problem is that developers want to cater to demands to build these nice fancy UI experiences that need to be rendered perfectly on various devices. And so, the original intent of HTML goes right out of the window. What's left is an unreadable mess of spaghetti HTML, mangled DOM's with non-sensical auto-generated CSS classes to which one needs compilers and transpilers and entire toolchains as you write your CSS in an entirely abstracted fashion. When you're building a complex interactive application for the browser. That's just the current state of affairs one will have to accept. Presently, you're still, in essence, using tools that originally never were designed for that purpose. However, if you're just going to build a simple blog or a site with static content, it pays dividends to think about the structure of your content, consider the semantics of your HTML and the CSS classes you're going to use. Using pure CSS, you could then easily write lean, performant and understandable stylesheets that don't need to be processed by complex toolchains. And you certainly wouldn't need complex frameworks to build a website. Of course, YMMV, and so there's definitely a market for Tailwind and their ilk. I do think that developers should learn about "golden hammer" syndrome early in their career: while frameworks make your life as a developer easier, they aren't the best choice in all use cases. From the perspective of a "body shopping" business, it makes sense to standardize the process as much as possible and fall back to a few well known tools and practices with repeatable - and therefore measurable - outcomes. In the same vain, the big trade off here is providing any form sanity/clarity when someone hits the "browse source" button in there browser.

damnencryption 6y ago

You can use postcss and @apply tag to compose single classes that you can use in your html code like .btn-blue .btn-blue { @apply py-2 px-5 flex items-center bg-blue-500 text-white rounded } So I don't really see that as a problem. You are supposed to refactor your styles later to be more reusable. What tailwind provides is fast iteration and design. I love that.

systemvoltage 6y ago
I could use sass to do the same.
- damnencryption 6y ago
  Yes. You can use tailwind with sass as well though it's not recommended. Think of tailwind as a framework for all your styling needs while sass is more a functional language to generate CSS for you.
- propelol 6y ago
  Partially. You'll lose the system Tailwind gives you, which makes it easier to be consistent.
  - systemvoltage 6y ago
    I handcraft that system myself. It's like buy Ikea furniture and assembling it vs. having your own woodworking shop to handcraft furniture with precise requirements. These frameworks have made me lazy. I think CSS design is pretty much exactly the same as any craftsmanship job - there is so much pleasure from building it from the ground up. No, I still get the knots in the wood out by using reset.css. Also, I try to not use class selectors as much as possible. HTML looks sterile and spartan with only a handful of span tags or id tags for very specialized targetted changes. I can see why people use frameworks - its fast and quick. But you lose personality in the outcome.
bnt 6y ago
The exact problem is the 99% of people who DON’T do this and their markup ends up a Frankenstein’s monstrosity. I don’t know if it’s the new crop of front-end “developers” who don’t know the very basics or just hipsters being hipsters and YOLO all the things. Tailwind (IMHO) promotes bad practices and needs to explicitly state that you SHOULD use @apply or a puppy somewhere will die.

ktpsns 6y ago

I miss CSS compilers like SCSS/LESS on your vita ;-) Basically the best way to do CSS I ever worked with was using Bootstrap the LESS way. You could use a sean HTML code with semantic (=speaking) class names and basically do the mapping to bootstrap classes within LESS. This was subsequently compiled to short CSS code. The best of all worlds. I guess the CSS framework SemanticUI has a similar idea in mind. However, most people use it in the same way as Tailwind. This is web technology as it was done 10+ years ago, when people mixed markup and styling. It's a pity that young folks don't know...

mahesh_rm 6y ago

Similar curve. I found my optimal trade-off with tachyons.css.

kilroy123 6y ago

I did the same thing for a recent side project. Only I still use sass.

jonoc 6y ago

The problem I have with pure CSS is it relies on the fact that you and your team are experts at CSS, which is almost never the case. Pure CSS with an unexperienced developer can lead to spaghetti pretty quick. There are always limitations with any approach, including frameworks, but on a team with more than 1 developer and long term maintenance in mind I'd prefer to go with a framework more times than not.

lambda_obrien 6y ago
I'm tired of this argument: train your devs for the job you have for them, or if they're not trainable, then find them another position not doing stuff they are incapable of. We're engineers, let's act like it and know our goddamn stuff, not dumb it down to the LCD.
- Scarbutt 6y ago
  Blame companies and job titles like 'Full Stack Dev'
- mattgreenrocks 6y ago
  This feels like the story of a lot of web tooling: accessibility over all else, especially performance/future maintenance. The fail-fast/move fast and break things culture of some startups bleeds into the aesthetics of tools. Knowledge of tools begins to be confused with skills. Ironically, it burdens new devs heaviest, as they're not able to sort through which concepts/abstractions that tools bring with them are worthwhile, and which are not. It drove me away from the platform entirely. (This isn't about Tailwind, I've never used it, so I can't comment on it.)

tarkin2 6y ago

1. this is a pain. 2. i'll write an abstraction 3. the abstraction is a pain

mhoad 6y ago

This is basically exactly what I get out of writing web components. I get the best of every possible dimension I care about. I can write short neat little snippets of code that encapsulates my HTML, CSS and JavaScript in a single place. I can do it just using really simple CSS because it is all scope, I can actually build reusable components, I’m using the native web platform (though I do recommend lit-element as well) and I can do all using modern tooling and JS and all of the benefits that brings.

ChrisArchitect 6y ago

amen. Not comprompsing layout for responsiveness... things have improved since the 960-grid days. (you've been around!) Amen.