Skip to content
loading...

re: What are your thoughts on Tailwind CSS? VIEW POST

TOP OF THREAD FULL DISCUSSION
re: As a backend dev, don't you find this violates separation of concerns? The HTML should have no knowledge or care about the appearance it has, which...
 

I find that most developers misuse the word "concern". Often Frontend devs think that technology is concern. But CSS or HTML or JavaScript are not concerns. They are technologies, languages.

Here is what Wikipedia says:

When concerns are well-separated, there are more opportunities for module upgrade, reuse, and independent development. Hiding the implementation details of modules behind an interface enables improving or modifying a single concern's section of code without having to know the details of other sections and without having to make corresponding changes to those other sections.

The less files you need to edit to make a necessary change - the better your concerns are separated. (Hence I like Vue.js.)

In other words a concern is: a searchable drop down component, or a user profile page, or a login form, or feature of some kind. But not a programming language.

Tailwind is the next step in the concern separation game. My HTML and classes (and some JavaScript) are blended together within the <template>. It allows me to drop <style> and the css language altogether. Thus concentrating my concern more within the <template>.

Having fewer files to update doesn't really mean you've separated concerns. An extreme example is the typical spaghetti code where your entire app logic is within 1 or 2 files.

Blending multiple languages together into a single file feels very much like the opposite of SoC. The code is tightly coupled both ways, the HTML depends on the specifics of Tailwind, making it very difficult to move or change in the future. Think about it in terms of dependency injection. You should remove tight coupling, and ensure that each layer only knows about the it's immediate relations.

the HTML depends on the specifics of Tailwind, making it very difficult to move or change in the future.

It's actually vice versa. It was very easy to move and change a component written with Tailwind. Extremaly easy. 😉

But you're putting the responsibility of appearance on the HTML, which it shouldn't care about. I realise it makes things easier for a backend dev that doesn't know much about the front end, but it's basically the equivalent of not using dependency injection because you prefer each class to create all the instances of everything it needs by itself. Sure, it works, and it can be done very quickly, but it's not clean, and it isn't going to be very maintainable at scale.

If you Google other people opinions on Tailwind you'll find numerous claims that it is actually more scalable, more maintainable.

To believe all those people you'd need to try it yourself.

Let's close this thread until you compare the traditional semantic CSS with Tailwind yourself on a real project.

Cheers! 😀

code of conduct - report abuse