DEV Community

Cover image for Why are CSS frameworks so used?
Lucia Cenetiempo
Lucia Cenetiempo

Posted on

Why are CSS frameworks so used?

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:

Usage Statistics and Market Share of CSS Frameworks for Websites June 2022

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?

Top comments (89)

Collapse
 
darkwiiplayer profile image
Wii 喉改

this describes it quite well, I'd say.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

but this fucking bootstrap site is great

Collapse
 
darkwiiplayer profile image
Wii 喉改

The website even admits it itself at the very end:

Honestly this template does look really nice, though.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

ahahha I confirm

Collapse
 
azmatullah93 profile image
Azmat Ullah

Please give me the fucking source code.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

try to search bootstrap template on Google

Collapse
 
fjones profile image
FJones

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.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

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/

Collapse
 
highasthedn profile image
highasthedn

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.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

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 仁

Collapse
 
highasthedn profile image
highasthedn

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.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

ok tomorrow morning I will test MUI you convinced me! And I let you know!

Thread Thread
 
highasthedn profile image
highasthedn

I'm looking forward to your feedback

Collapse
 
itscasey profile image
Casey

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

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

that's exactly my thought even if there are particular moments / reasons why I evaluate the use of some framework

 
darkwiiplayer profile image
Wii 喉改

To be fair, not every bootstrap site has to look the same; the joke is more about those sites that don't get customised all that much. It's those that really do all look the same.

Using bootstrap for a grid system really underlines how outdated it is: Browsers that don't support css grid have already almost disappeared completely and there is almost no reason anymore not to just use that for a grid layout these days.

Thread Thread
 
fjones profile image
FJones

There's also nothing wrong with all Bootstrap sites looking the same. Having a consistent UI experience across different sites is not always a wrong thing. We don't expect the context menu to look different in every desktop app either, or the window frame to have its buttons in different places - even though that's just the opinionated common UI enforced by the desktop environment.

Thread Thread
 
darkwiiplayer profile image
Wii 喉改

There's a difference between applications that require lots of user interactions and things like product websites that essentially act as glorified flyers.

When your UI is complex, non-linear and requires lots of interactions, it's good to rely on the users' familiarity with similar applications.

But when the goal is to present the user with information about your product, then you will probably want your UI to stick out and grab the users' attention.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

It is absolutely a joke that all bootstrapped websites are the same.

As I said, my own problem is wasting too much time customizing it if the only thing I need is a grid system or styled buttons.

I agree that every now and then it is right that some particular apps give the user a similar use experience, but I would not delegate the burden of studying an effective design to bootstrap.

I believe that the value of a research also on design is fundamental for the success of a project and not always assume that what works for everyone works for you too.

As Henry Ford said: "If I had asked people what they wanted, they would have said faster horses."

Collapse
 
eshimischi profile image
eshimischi

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

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

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?

Collapse
 
eshimischi profile image
eshimischi

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

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

ok this seems to me a pro approach! I love it, and it could save you a lot of time!

Collapse
 
unsungnovelty profile image
Nikhil • Edited

Here are my reasons for using Tailwind CSS:
dev.to/unsungnovelty/explaining-wh...

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

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?

Collapse
 
unsungnovelty profile image
Nikhil • Edited

utility classes are really that useful?

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.

it is so important to have a flex class that does nothing but a display: flex

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 be div class="flex place-content-center". If you remove flex here, 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 then have to customize?

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 flex but rather the values of utility classes like padding values for p-0, p-1, p-2 etc or the values like w-0, w-1 which are for width.

Hope I answered your question. :)

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

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.

Thread Thread
 
unsungnovelty profile image
Nikhil

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.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

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

Thread Thread
 
unsungnovelty profile image
Nikhil • Edited

unfortunately the time factor is always recurring in our work

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

Collapse
 
danielhansson profile image
Daniel Hansson • Edited

For me, the reason I use CSS frameworks boils down to:

  • Speed, less time spent on figuring out how to make pretty components and more time building up the site.
  • Tested by many, less prone for unexpected errors, this point grows more solid the bigger CSS framework you use
  • Consistency, if building in-app applications inside other products, as example Azure Devops apps, I don't want to give the user an odd design and functionalitiy, different from product. Instead I use the product's components, and customize them when needed.
Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

your point of view is very clear. and I absolutely agree with the consistency of the user experience which, however, I would not base on the use of the CSS framework but rather on the best performing integration possible with the app in use.

Which framework do you use most often?

Collapse
 
danielhansson profile image
Daniel Hansson • Edited

For personal projects, I'm a big fan of using bootstrap and one more CSS framework specific to the frontend framework I am using (usually Vue). Fast to setup and it is possible for me to improve/tweak them to my needs. The main criteria I have for a framework, is that I shouldn't have too many components nor too few components. To loan a swedish word to describe what I want: Lagom with components.

While at work, I use whatever framework the in-app application asks me to use. For the sake of consistency and functionality.

Collapse
 
evg profile image
Evg

They are simple and most importantly they are standardized. When you write something of your own, you need more experience with it, especially in giving your code some standards. And it's difficult.

Unfortunately today I meet people who use frameworks but don't know css very well. They have learned to use them as a constructor.

In fact, we have more freedom when we know and can write ourselves, but depending on the tasks, we can choose some kind of framework. Than when our knowledge is limited and we can only use the "constructor".

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

I think it is to be chosen every time in the specific case, but I also met those who use frameworks as constructors and that is why I wonder if it is not wrong to always start from a ready base

Collapse
 
evg profile image
Evg

In my opinion, but I could be wrong, the fastest way to learn something is to start learning css from scratch. Actually, like programming languages. I am more and more convinced of this.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

yes I also believe that the best way to learn is to start from the basics, then a css from scratch to be able to understand the logic

Collapse
 
iharshraj1123 profile image
harsh • Edited

99% times i use Vanilla css. But I do like sass. I code for fun so i take my time building everything myself.
Though for a long time I was thinking of finding a framework to help animate, it's pretty time consuming when I have animate stuff like fading in or out effects.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

I also use sass, and I created my own "mini framework" with mixins that I use often, which is why I wanted to understand from others what positive aspects they find in frameworks.

In short, if many use them there are certainly reasons.

Collapse
 
atulcodex profile image
Atul Prajapati 氣

To save time

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

how specifically does it help you save time?

Collapse
 
atulcodex profile image
Atul Prajapati 氣

It is difficult to explain in words 打 you have to try CSS and bootstrap one by one

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

ahahha I know both just wanted to understand what specifically which bootstrap features you use the most

Thread Thread
 
atulcodex profile image
Atul Prajapati 氣

Cool

Collapse
 
tilakjain123 profile image
Tilak Jain

With a CSS framework, we have a completed CSS stylesheet, and we only have to code the HTML with accurate classes, structure, and IDs to set up a web page. It has several advantages like cross browser compatibility, faster coding, customisable. We can also find ready to use templates online that we can directly use in our project. Let's take Bootstrap, it is most used css framework. Bootstrap website contains many ready to use templates and examples that are responsive too. So it becomes easy for us and also complete our work quickly .

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

I understand, but in this sense to me it seems a bit like buying a theme for wordpress and configuring it

Collapse
 
tilakjain123 profile image
Tilak Jain

It depends on your preference!
Every one has their own choice, some love to use natural css and some love to use library frameworks.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

I agree, but in addition to the choices there are also the needs I also use the frameworks when I need them, it's just to understand everyone's thoughts on the matter

Collapse
 
tyler_creating_things profile image
Tyler Woodcook

Sometimes enforcing some level of restrictions helps ensure consistency. I don't use proper CSS framework, but I try to implement the concept with my CSS. I like not having to make decisions in the moment as often as possible. But that's just me.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

we use the same approach, most of the time I prefer to create my utility classes and include them in sass in order to have the basic things already written but by me therefore completely designed for that project from the beginning

Collapse
 
ajit_shaw profile image
Ajit Shaw

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

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

不 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

Collapse
 
astorrer profile image
Aaron Storrer

Oddly enough, I think that making all our sites look "similar" is better, not worse, for the users.

Collapse
 
luciacenetiempo profile image
Lucia Cenetiempo

I don't agree with your point of view, but explain it to me better if you can

Collapse
 
astorrer profile image
Aaron Storrer

Take the 'hamburger' menu for example. Most sites now use them, and most sites use three horizontal bars to denote that the menu exists on the button. That is the type of similar, standardized behavior that occurs when frameworks are being used. However, standardization makes the site easier to navigate. You could build a pie shaped menu that floats on the bottom right corner of the screen. But... why? Will it make users happy? If this is an ecommerce site, will it drive more sales? No. Take a look at Shopify sites, half of them are modifications of the same template.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

I just say that it is not right to make everything standard, it is more right that on each project the design and the most optimal functioning are studied in detail to achieve your goal

Thread Thread
 
astorrer profile image
Aaron Storrer

Right. But then most web apps are very much the same. Although if you are making something truly novel, I'd agree that more time needs to be put into the design. Standards don't always work for every project - but probably do for most of them.

Thread Thread
 
luciacenetiempo profile image
Lucia Cenetiempo

yes, but two ecommerce sites for example don't necessarily work the same way. I might have to sell smartphones to super-skilled people but on another I have to sell technical fishing clothing, so we have two different targets and we need two completely different user experiences