If you are looking for a component library for your next project, there are tons of options for you like Material UI, Chakra UI.etc. I have used CSS frameworks like Bootstrap, shoelace.js.etc. But, do you really need a CSS framework in 2022?
What do you think? 👇👇
Top comments (18)
In my preference we actually don't need any css frameworks in today's date. The reason being that we have a lot of websites in today's date which provides prebuild elements with html and css which a developer can use to hack through some repetitive process. And in terms of performance always
CSSwould always beat all others 👨💻.And let you assure you that a engineer needs a good sense of design knowledge and working with
CSSwould improve it in time . So future developers would be able to make amazing looking websites in a quick and clean way ✌.Couldn't agree more 🙌
If you stay true to your css structure it's far more easier designing everything by yourself. Most experience in structuring I gained by looking through code of other frameworks and adapt suitable improvments for me.
Right Supportic. It takes time for developers to understand this but as someone dig deeper into web development they understand this fact 👍.
CSS frameworks are a matter of scaling. Huge project with plenty of people involved absolutely need it. A portfolio maintained by a single person definitely don't need it.
Still, there are a lot of reasons to use it even when you don't need it. Most people are decent, but not good, at CSS. Writing custom CSS therefore quickly escalates to a mess. Sticking to a UI library can very often save you from that.
Anyhow, if you only plan to use a single or a few components from a library, you're probably better off without it, IF you know how to write the compontent so it works well.
I do it all the time. Most of the time, when I install a component library, I do so for a single component or two 😄. Even though I am decent enough with css grid flexbox and layout system, I don't believe in my design skills yet. Most of the time, I do the layout myself, and use a prebuilt component library.
It depends on the person really. I personally use a css pre-processor (sass) to write my code and since I've recently started to create projects using nextjs, I don't really want to overload the js files if I use something like tailwind so using sass modules is ideal afaik in that specific scenario.
sass is a brilliant tool to use 🚀.
Is this for your company and not a side project? If so, does your company have a design system?
Assuming your answering is "yes" to both of these questions, then there are several things to unpack.
First, what is Material UI (and the like)? Material UI is a very generic design system that encapsulates behavior of common UI components with the look and feel of Google's Material Design.
Since your company has it's own look and feel in a design system, you don't want to use Material UI for the purpose of getting its look and feel via its components.
Rather, you are interested in using something like Material UI as a quicker way to have UI components with certain behaviors already implemented, saving you time from writing the components from scratch.
In other words, you want headless or unstyled UI components.
It seems that the design system community has begun to realize the use of a headless UI library, and so, we've seen things like Headless UI and MUI Base.
I believe this is a positive moment, and it would be a great idea to leverage these libraries, skinning them with your own design system's theme (preferrably with design tokens).
Second, once it has been established that unstyled libraries are useful to leverage (or styled libraries with all the styles manually removed), the next question is: how do you leverage them?
My recommendation is to create a separate library with your own design system's UI components (and assets), and then you can wrap the "base", unstyled UI components, encapusulating your own styles and default behavior as needed (as well as any normalization of the prop signature to match the lingo of your company's design system).
Third, if you exporting UI components that are wrappers around "base" ones, then you also have the liberty to cherry-pick from multiple UI libraries, taking the best of the bunch.
Hope that helps!
Yes. tamagui.dev is the best of all worlds: fully cross platform, compiles out CSS with media queries on web, gives a RadixUI style of ARIA compliant base components to build on, provides some components you can use wholesale, or customize at will, using a Tailwind inspired API.
I will definitely check this one out ✨
Component based libraries are for the 80% use cases. Like a normal open source website page or projects which are trivial enough that it doesn't need a highly customised website.
The rest still needs CSS or Tailwind CSS which is utility class based.
It's a mix of both. Never one sided.
I usually write my own css for most of my personal/individual projects. Because using frameworks and component libraries make me feel strict. Additionally, they provides tons of code which I don't use.
But for those projects which need to be handled by multiple developers, I prefer using frameworks or libraries.
Personally, I prefer to write plain CSS however there can be use cases for having a CSS framework. Like if you are working in a company that wants to enforce HTML and CSS standards across a project. It is far easier to adhere to the principles and classes in a CSS framework than it is to get all your developers to follow the exact same style.
CSS frameworks nay, component libraries yay! Most component libraries today include some way of doing CSS-in-js. For example Mui components ship with an
sxprop that you can use.mui is very convinent
The larger and more diverse your team is, the better a fit are component frameworks, because they partially normalize the lack of design/styling skills.
If using any of these component libraries means reducing the development time immensely than go for it. Time is money, and clients don't care how you get the job done.