Why are CSS frameworks so used?
I mean, why*??? ๐คฃ
I don't particularly love them, they give me the idea of forcing myself into useless schemes but I am open-minded ๐ฌ and therefore I would like to know which of you uses one of it and what are the actual benefits, obviously in addition to those we all know.
Here are some statistics on the use of CSS frameworks:
As many as 20% of all websites (ALL) use a framework. ๐ฎ 80% of these use bootstap.
Source: https://w3techs.com/technologies/overview/css_framework
Okay, come on, it's your turn now.
let me change my mind. ๐
Why you usually use a CSS framework?
What advantage do you find in using a CSS framework?
And which one you prefer?
Oldest comments (89)
this describes it quite well, I'd say.
๐๐๐ but this fucking bootstrap site is great
The website even admits it itself at the very end:
ahahha I confirm
Please give me the fucking source code.
๐๐๐ try to search bootstrap template on Google
Everything is out of box or you customize it how do you want. Utility first frameworks like Tailwind may look complex but after your first project it loses complexity
I've used Tailwind and it's actually my favorite when I need to be fast precisely because it seems to be freer in its patterns.
What aspects do you appreciate about Tailwind?
For my inner projects i made an instrument for exporting Figma tokens into Tailwind stylesheet, it has a very flexible configuration and i like it
ok this seems to me a pro approach! I love it, and it could save you a lot of time!
Best thing about using css framework is that you save a lots of time on writing css. I can use the framework components, also can write my own styling. Best thing that it has the responsive (Mobile friendly) css ๐ค
๐คฃ if you find a framework that is not responsive you have found an archaeological find. Seriously, I understand speed but that's actually my problem, I waste more and more time in customizing than in making it tailor-made
My main reason is that you have basic things like a useful grid system out of the box. I can concentrate on the app itself and save a lot of time because I do not have to code basic stuff before I start to code the real main features.
My first framework I used was Bootstrap 2, meanwhile I mostly code React applications where I always use MUI. The reason is basically the same, I have almost every component covered I will use in my app. There I will have to customize and spend time with it for sure, but in the end I have a solid base framework which is tested by a huge community.
I understand your point of view. I have never tried MUI and I will definitely test it for some apps to do quickly ๐ there is always something to learn.
Do you recommend it to me?
My problem with css frameworks is that most of the things (for example a ready-made grid) are now feasible with a few lines of css (e.g. grid or flex box) and I have always lost more time to customize a framework than starting from a blank page ๐คฏ
I definitely can recommend it, meanwhile I'm using it in several projects for 5 years and I'm quite happy with it.
I understand your point, that's also a little dilemma for me. Some css frameworks are totally overblown, especially when I just want to use a stupid grid system ๐
With Bootstrap I lost a huge amount of time for customization, but after I was more and more familiar with it I think I saved the time in the end.
ok tomorrow morning I will test MUI ๐ you convinced me! And I let you know!
I'm looking forward to your feedback ๐
It depends a lot on the raison d'etre of the framework. With bootstrap, the simple, conforming standard of design is the main point. With Tailwind, the build process replacing difficult cascading and cleanup rules is the point (utility classes can be very useful!). Overall, abstraction from the raw instructive nature of CSS is the main reason people gravitate towards frameworks.
as I said above, I am perfectly aligned with you on Tailwind ๐ About bootstrap actually I find it outdated, especially if you want to dare a little more on design. As @darkwiiplayer wrote above everything in my imagination seem to be like this: everybootstrap.site/ ๐
point 3 is the reason why I still use there too from time to time ๐ but I love css so I miss point one.
I typically don't use a framework because:
1) I like writing CSS, wtf?
2) I hate the cookie cutter look of most of the frameworks out there.
3) Flexbox makes things so gosh dang easy it's hard NOT to write it
that's exactly my thought ๐ even if there are particular moments / reasons why I evaluate the use of some framework
Here are my reasons for using Tailwind CSS:
dev.to/unsungnovelty/explaining-wh...
nice post! I quote two parts:
"Tailwind CSS is a utility-first CSS framework."
which is why it's my favorite framework ๐
but also:
"Utility classes like flex for display: flex ;, p-2 for padding: 0.5rem; are just examples of utility classes provided by Tailwind CSS."
utility classes are really that useful?
it is so important to have a flex class that does nothing but a display: flex if you then have to customize?
I find utility classes good for developer experience. All I have to do is declare my utility classes and look at the output in my browser. Not to mention it provides speed. I really can get things done faster.
The only thing that I am yet to experience is the readability and maintainability concerns which I have outlined in the post as well. But only for complex setups where readability will be effecting the maintainability in a negative way.
I think it makes sense when you embrace utility classes. Sure, when you take this one piece out of the equation, it might seem odd. But as I mentioned in my blog post, a good thing about Tailwind CSS is that you are still thinking in CSS. So apart from being a slightly shorter version (without which the utility class declarations in your html will be longer, mind you), it makes it readable and make me think in CSS.
For example, if I am to center an element horizontally and vertically with
flex, my html class will bediv class="flex place-content-center". If you removeflexhere, it's not very readable.Also, a question right back at you would be why not? It's still readable and shorter. How is it doing anything bad? :)
If you need to customise the utility classes, you are not fighting the framework like you would with Bootstrap, bulma and other component based frameworks. Where you will start writing CSS separately with or without SaSS/Less.
With utility classes in Tailwind CSS, you are declaring new values and you are using that as a whole new set of values. And you are not changing
flexbut rather the values of utility classes like padding values forp-0,p-1,p-2etc or the values likew-0,w-1which are for width.Hope I answered your question. :)
first of all, I love your answer ๐ thanks for your super in-depth opinion. It is what I was looking for, a detailed opinion on the use or not of the frameworks.
"" Also, a question right back at you would be why not? ""
The truth is that I almost completely agree. If you need to go fast in development I love Tailwind because the utility classes allow me to maintain the readability of the code as you say and start from a ready base and display my project in short time.
When I have more time available I prefer to create my own mixins or utility classes in sass so as to keep the readability even more because I know perfectly what I wrote and it is tailored for that site.
I can understand that. I also have been thinking about my own utility classes with readability in mind using SaSS. Maybe not a component based setup but combining a couple of those utility classes of Tailwind CSS to one for my specific needs. Just haven't had the time recently.
unfortunately the time factor is always recurring in our work, but if you do, let me know how you organized it that now I'm curious ๐
Tell me about it! :D
I will definitely write about it if I do it. I am currently trying to move towards Neovim and Nix package manager for dev stuff. And it is definitely taking priority whenever I get free time! :D
Maybe an unpopular opinion, but I suspect a lot of it is because people don't want to bother to learn CSS properly :)
or they just get bored doing it ๐ฌ I'm learning this from this discussion, and it's very interesting
To save time ๐ฉ
how specifically does it help you save time?
It is difficult to explain in words ๐ฅด you have to try CSS and bootstrap one by one ๐ฉ
ahahha I know both ๐ just wanted to understand what specifically which bootstrap features you use the most
Cool ๐