Frontend Development
Hello guys, Any suggestions which approach offers better readability, maintainability, and faster performance in front-end development: using plain CSS, a CSS preprocessor, or a CSS framework?
25 Replies
This is a very opinionated topic with many subjective answers. In terms of performance, it should'nt make a difference.
I would advise against a pre processor - css itself is very feature rich and imho already complex enough.
I think there's still an argument for using pre-processors, even though CSS now has many features like nesting and such. Mixins is a big favorite of mine, and that alone makes it absolutely worth it, for me anyway.
Another big plus is file organization as you can import files as needed. This also exists in CSS natively, but it will require making additional requests to fetch those files. Not a big impact on loading times, but it's there.
In terms of performance it doesn't really matter. The performance comes from how you write the code, rather than with what.
In short, there's nothing to lose by using a pre-processor while still gaining a few improvements here and there. For me it's a no brainer, there's no reason not to use it.
Bundler would take care of that anyway
Except for another dependency tree with another syntax and increased compiler times.
I don't think those arguments weight very much: the syntax is nearly identical, only differs in the additional features it provides. Compiler times increased... by how much? During development it's fast enough that it's done by the time I switch between editor and browser. At build time, it's negligible. And if you're troubling yourself by including a bundler in your toolkit, you are already including additional dependencies. Why not also a preprocessor?
I mean its okay to use it, i just think its not necessary. But if it makes the work so much easier for you, then go ahead
I agree, and like you said, very opinionated topic 😄
I am a big fan of tailwind btw (and yes I know it forcibly comes with a css pre processor) its greatly readable and maintainable imho
We had a great discussion about that here: https://discord.com/channels/436251713830125568/1195001775049158687
I think Tailwind gets a lot of deserved criticism, but also a lot of undeserved hate. It has it's place, and can be immensely useful for quick iteration and prototyping. It's not my preferred tool but it's quite handy.
This discussion is definitely too long for me to catch up, but if we're talking about beginners, I generally recommend not using any frameworks or libraries at all and instead learn the bare basics. Tailwind is very close to vanilla javascript - much closer than "styled" libraries like bootstrap or others that come with a predefined design system. You cant use tailwind without understanding and knowing css already. Tw will not give you a readily styled button - you still have to know all css properties to style the button with tw classes.
I agree that you need a good css base to use tailwind, I just don't see the value of tailwind once you have that base. It just makes your HTML unreadable, and the whole point of CSS is to have that cascade and to not repeat yourself styling multiple elements similarly, and you lose that by faking inline styles like you do with tailwind
to weigh in on the original question: Plain CSS is going to give you better readability (not everyone will have experience with your framework of choice) and performance (you won't have any extra CSS to support features of a framework you may not use). I'd argue maintainability is higher too, a framework update can be a major pain.
the selling point of frameworks is none of those points though, it's all in the developer experience. People use bootstrap because they want to just go
<a class="btn btn-primary"> and have something that looks alright for 99% of cases.For most tasks I still prefer CSS or SCSS, but I agree with what Jochem says about the developer experience. I've found that for any code that I didn't write myself, or after a while, Tailwind becomes a nuance to manage. When you are the one writing the code on the other hand, it doesn't look cluttered and it's quite comfortable to use.
But for beginners: always learn the basics, and learn them properly. No matter if it's HTML, CSS or JavaScript. Frameworks are cool and all but they are much more useful when you know how to use them effectively, which means learning the fundamentals they are built on.
Are you using component frameworks or template engines? I think that makes the difference on how one views this topic
personally neither
You're just making static html pages?
no, just using vanilla CSS with either PHP or sveltekit
Ah okay, that was my question. If you're using Sveltekit, then you're using a component framework. If you're using php, then you're using a template engine
ah, I thought you were talking about something-something css, I misunderstood. I've used plenty of PHP without templating engines though
Tailwind only really starts to shine when using it in combination with components, thats why I asked
see, I don't disagree, but only if the framework in question doesn't support scoped CSS
Scoped css is definitely a valid alternative to tailwind
which is part of why, for me and pretty much most people that don't use React, Tailwind is kind of a pointless abstraction to solve a problem that's better solved with just using scoped css in your component framework
I dont agree but I dont wanna fight with you over such a meaningless thing. I use tw with Svelte and found it to make everything easier. Especially layouting and working with colors is great in tailwind.
yeah, fair enough
The themes in Tailwind makes things so much easier for me. A big plus for it tbh
An alternative may be scoped styles and a thought out structured css variable system + a bunch full of global layouting classes for flex, grid, positioning, etc