loading...
Cover image for Why you should Stop using CSS Frameworks

Why you should Stop using CSS Frameworks

urielbitton profile image Uriel Bitton ใƒปUpdated on ใƒป1 min read

Yes CSS frameworks can be useful and speed up web design time which is the main purpose of why they were created.

But the issue with using CSS frameworks is that:

  1. You will eventually forget css and not be able to use it when css frameworks are not an option
  2. Having custom styles is complicated (overriding issues) and will require multiple css files to be loaded.
  3. Designing custom styled apps and websites is awesome and very creative as well as challenging, why avoid this? (My main reason)
  4. Your designs will look generic, many people use bootstrap, material ui, etc. They all look the same.
  5. Create your own css framework to use as your own personal style, this is much more rewarding and can be reused for future projects.

There are many more reasons i dislike css frameworks. These are just the main ones.

Do you agree? Let me know your thoughts below!

Edit
To clarify, as some people got a little excited, this article is an opinion piece and not meant to change people's way of doings things. I am simply dicussing why i don't like CSS frameworks, if you like to use them then by all means please do. This article only suggests, it does not force you to stop using frameworks - the title is just provocative on purpose.

Discussion

pic
Editor guide
Collapse
bholmesdev profile image
Ben Holmes

Hm, I feel there's a lot of nuance here that's worth considering.

First, I'd want to draw a distinction between a) pre-styled, prescriptive frameworks like Material UI and Bootstrap and b) utility frameworks like Reach UI and Tailwind CSS.

The former definitely comes in handy for anyone trying to build full stack applications without a design team on standby. For such an audience, the training wheels provided by, say, Material UI components are critical for moving fast.

These training wheels also ensure accessibility guidelines are met without as much research on the developer's part. You may not think about it, but hacking together dropdowns and tab sliders that look good won't always work well for all people. I recently wrote a longform post on building an accessible navbar for this very reason; there's so many little things to consider that Material UI et al. will consider ahead-of-time!

Now let's consider those utility frameworks. If you're unfamiliar, frameworks like Reach UI provide a "skeleton" of CSS and React components to build your own visual identity on top of. This framework merely exists to help you hit accessibility guidelines for modals, tabs, custom select boxes, etc, while also giving you powerful CSS selectors to build from. I'm a CSS warrior myself, so I lean on this type of CSS framework super hard to get things done.

I also threw in the Tailwind utility framework, which also empowers you to build your CSS from a set of building blocks. However, this takes an entirely different approach to the problem that's worth its own evaluation. Check out this post by @swyx to understand that one a bit better.

My personal stance

Overall, I think writing off CSS frameworks is a bit of a hand-wavy statement to make given the huge landscape of tools out there right now. There will always be a place for prebuilt solutions like Material UI; if anything, I see them as one step removed from powerhouses like SquareSpace or Wordpress (closer to the code, but with a lot of details abstracted away). Also, for the sake of accessibility and developer speed, anything from Reach UI to Tailwind should fit the bill for some.

Still, keep hacking away my friend! I'm right there with ya ๐Ÿ˜

Collapse
nomade55 profile image
Lucas G. Terracino

This should be a post itself. Very good insight.

Collapse
bholmesdev profile image
Ben Holmes

Well, I took your suggestion. Decided to turn this comment into a longer-form post ๐Ÿ˜

Collapse
coopercodes profile image
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

Hell yes!

Let's delete the original post and replace it with this.

Collapse
urielbitton profile image
Uriel Bitton Author

Good point, i general agree with most of the things you say. However, many beginners use css frameworks and that is simply self-damaging. CSS frameworks are best used by experienced developers working on large business projects alone without a team to help the developer. This i can understand. What i can't understand is when the framework is being used to build simple websites for clients and small passion projects.

Collapse
bholmesdev profile image
Ben Holmes

I totally agree; frameworks aren't the best fit for every use case. I've built quite a few projects recently without any frameworks at all since I'm a CSS warrior at heart.

Still, there's something to be said for utility frameworks like Reach UI on this front. These are perfect for nailing accessibility guidelines out of the box, but still leaving the door open for custom CSS on top. Very little is left to the imagination! It just gives you a baseline to work from, and guides you on custom styling (with documentation!) using simple CSS classes.

I really like the direction of these frameworks in particular over powerhouses like Material UI (which you probably had in mind when writing this post). Still, to each their own.

Collapse
athomsfere profile image
Austin French

But many new developers also get thrown into the deep-end of a full stack.

When it comes to data integrity, solid business logic, a good view (HTML, Js) and CSS, writing custom CSS when something like bootstrap does most of it OoB... Choosing to write your own is potentially the least important and impactful to the product owner and technical leads. I'd agree with them most of the time too. Far too often the CSS is the worst written 'code' of an application. Where I go from "This site looks pretty good" to "Holy hell, how is this maintained?"

Collapse
lamambasan profile image
San Lamamba

Very good of breaking down the problem ๐Ÿ‘Œ๐Ÿพ

Collapse
vaibhavfuke profile image
Vaibhav

Yes correct. If we have infinite time then don't use css frameworks. The main aim of the framework and utility is to reduce development/designing time. End user don't care what you have or haven't use. Beginners should use css. But professional should use utility frameworks cause they need to get work done. Big fan of tailwind๐Ÿฅณ

Collapse
mzaini30 profile image
Zen

I usually use Bootstrap for finish my projects fast. Then, no complain from clients. No problem.

Collapse
pmejna profile image
Przemyslaw Mejna

I hate all CSS frameworks but in real life all is about efficiency. Projects need to be done, there are deadlines. If you can do what is on the mockup with framework and that will make your task faster - why not? Of course if you will get a website mockup which will need custom solution - you will have to use CSS and make it this way. I think we need to work the way is best for us. That's why I don't tell anybody to not use a frameworks or work only with vanilla CSS because this is not my business

Thread Thread
mzaini30 profile image
Zen

I usually use all framework for finish projects fast. Like Bootstrap, Svelte, etc

Collapse
jfbrennan profile image
Jordan Brennan

Until you realize you're just maintaining your own buggy CSS framework that is taking away from shipping real functionality.

My preference is fork and theme existing design systems, but the problem with that is they are all opinionated bloated monsters restricted to React. I decided to forget all that and built this little library M-. By all means fork M- and make it your own, it's a great starting point and the codebase is dead-simple

Collapse
mzaini30 profile image
Zen

M- is cool

Collapse
jfbrennan profile image
Collapse
michaelandreuzza profile image
michael-andreuzza

Is time to get over.

Using only CSS is not making you cool.

The super hyper mega cool things you can do with CSS won't need to be applied to the real real world.

You don't need super duper layouts to you reach your audience.

Make things clear and understandable, damn, it would be enough using Markdown.

Simplicity is the key, and for that, CSS frameworks are the quickest thing we have...

Collapse
leob profile image
leob

But, isn't there a large amount of mundane "basics" (e.g. CSS resets, just to name one) which you then have to take care of every time? I don't necessarily have to have a complete framework, but unless I can start with some of those basics having taken care of for me (CSS reset, grid system, typography) I'd be afraid that this would slow me down (well at least the first time, when I have to sort it all out).

Apart from that, the arguments against CSS frameworks are much less valid against utility style frameworks like Tailwind. And no, even when using Bootstrap I'm in no way afraid of forgetting CSS :-)

Last but not least, I agree that this line of reasoning (don't use JS frameworks but use Vanilla JS, don't use CSS frameworks, etc) does become more compelling and realistic as browsers become more capable and the minimum browser support that you can build on is getting way better. Back in the days of IE8 I think people were relieved that frameworks took care of all of IE's quirks and bugs.

Collapse
urielbitton profile image
Uriel Bitton Author

I definitely agree with you man, which is why i encourage to build your own frameworks or at least build your own reset styles framework. I use my own reset styes and a light framework that i designed from scratch for all my web projects. Trust me its so much more rewarding then using css frameworks. Now don't get me wrng if you're building a large business project website or app that requires a huge amount of styling then sure a framework may be a good decision. But my article refers mainly to people who use it for normal websites, and small passion projects. That's what i don't vouch for. Again this is just my opinion, i respect everyone's opinion in the matter!
Thanks for sharing :)

Collapse
leob profile image
leob

Totally agree, when I have got some time on my hands (generally I don't, haha) then I definitely would like to do that - build a small "foundation" (excuse the pun, haha) because I'm convinced you can learn a LOT from that!

Collapse
chrisdemars profile image
Chris DeMars

Forget a framework and utility library. Roll your own!

Collapse
urielbitton profile image
Uriel Bitton Author

exactly my point, thank you!

Collapse
andreaswebdev profile image
Andreas Heimann

I actually never got 100% into CSS frameworks. I of course know how to work with bootstrap, but I know that I am personally faster writing it my own. Plus there is a lot less boilerplate-code and/or css overhead, which is also quite nice.

Collapse
cchana profile image
Charanjit Chana

I personally prefer to steer away from resets and frameworks but the minute someone else gets involved in the project then a well documented framework is something I would seriously consider.

Iโ€™ve seen the advantages of using Bootstrap first hand. I may not have been in love with how it looked, but it enabled multiple teams to build rich interfaces while concentrating on functionality. We could deliver functionality quickly and there was still the ability to theme it if we wanted to.

Collapse
gsarig profile image
Giorgos Sarigiannidis

While personally I clearly prefer writing my own CSS (here is my reasoning), I agree with those who say that it depends on the specific use-case.

As others pointed out, if you are a developer with no design skills and no specific design at hand, then using a framework like material UI or Bootstrap is not only helpful, but I would dare say, essential.

If for whatever reason you want to write the less CSS possible, either because you hate it and/or because you are not good at it, then a utility framework like Tailwind might be your thing.

If you work on a big project along with other people, again, a framework might be helpful to keep the code consistent.

If, on the other hand, you have to convert a design from a PSD, XD or whatever to HTML, then, depending on the design's complexity, a framework might even turn out to be an obstacle rather than a help.

Also, I am a fan of avoiding frameworks when I have to build a plugin or a theme meant to be used by anyone and not for a specific client. On those cases, I believe that the less dependencies, the better (that applies to the use of vanilla JS instead of jQuery as well).

Collapse
nieuwepixels profile image
Nieuwe Pixels

I read pros and cons in the replies, still I think the point didn't cross over (I am assuming)

As for me I also stopped using frameworks and went more modular.

In short, i have a SCSS for building the grids and rows and then I build on top of that. Yes, I have some common files in place allready also for generic stuff like buttons, forms and such.

If this was the intention of this post I get it and I think there's a valid point to be made to at least evaluate the need for a framework.

Collapse
matthewbdaly profile image
Matthew Daly

Your designs will look generic, many people use bootstrap, tailwind, etc. They all look the same.

This is probably true in most cases for Bootstrap, but it's emphatically not the case for Tailwind - it simply doesn't work like that. There's no such thing as a Tailwind component the way there is in Bootstrap. Instead, each utility class is pretty much a one-to-one mapping to a CSS rule. This also applies to the issue about creativity - Tailwind just provides a different way to use those CSS rules that's more convenient.

You will eventually forget css and not be able to use it when css frameworks are not an option

This isn't the case for Tailwind either since it's quite a thin layer on top of CSS.

And you don't mention one common use case for Bootstrap - admin interfaces. Many applications I've built for clients have needed an admin interface, and you can't as a rule justify very much time for it, but at the same time leaving it unstyled is not an option and it needs to be presentable. Bootstrap is a good fit for something like this.

Collapse
urielbitton profile image
Uriel Bitton Author

I have designed many admin interfaces using custom code, Why do you need to use bootstrap?

Collapse
matthewbdaly profile image
Matthew Daly

You don't need to, but it's hard to justify spending much time building and styling an admin interface that will only ever be seen by a handful of administrators, especially when you're doing client work. Bootstrap provides a workable set of components suitable for this use case.

In an agency environment it's very hard to justify spending more time than you need to on an admin interface when the cost has already been agreed and deadlines often slip.

Collapse
aleaallee profile image
Alejandro esquivel

Disagree, I'm a developer, not a designer, I agree that we should know css but if we are not a designer then we should use css frameworks

Collapse
urielbitton profile image
Uriel Bitton Author

So why not create your own css framework and solve all the issues!

Collapse
aleaallee profile image
Alejandro esquivel

To create a css framework you must know about design, and I'm not a designer.

Thread Thread
urielbitton profile image
Uriel Bitton Author

Well if you're a web developer its a good idea to learn basics of web design :)

Thread Thread
aleaallee profile image
Alejandro esquivel

Nah, I'm not interested in the design aspect of web development.

Collapse
ekafyi profile image
Eka

If you work with web UI in any way (which includes, eg., as a frontend developer working in a JS-based framework), you have to be comfortable with--and proficient in--CSS fundamentals.

That's it literally.

Use a CSS framework, don't use a framework, use BEM/SMACSS, use CSS-in-JS, use a UI component library (one higher level of abstraction) if it helps you and your colleagues achieve your product's objective more efficiently. These technicalities are subjective decisions.

You can "be creative" and make "awesome websites" and have a unique-looking design and fast websites with any of those stacks as long as you have strong foundations on CSS, HTML, the web APIs, and your chosen tech stack.

Collapse
mathcpepper profile image
Matheus

Sup!

I agree with some points but I still like the idea that I don't need to reinvent the wheel to do something simple. I'm not the guy who likes to use pre-styled frameworks Bootstrap or Material UI, but utility frameworks are always welcome.

Here on my team, we've started with Tailwind CSS for a small internal project and this is teaching us a lot about how to organize our CSS file for our main product and how we should make it easiest to use for those who are initiating with us.

Great points btw, keep doing we think, bro :)

Collapse
urielbitton profile image
Uriel Bitton Author

of course not that's why i always encourage to re-use your css code or even better create your own css framework!

Collapse
urielbitton profile image
Uriel Bitton Author

I have modified the title of the article to be less aggressive and made some edits as to my intentions weren't to force my opinion but merely to suggest and recommend.

I apologize if i offended anyone, it wasn't my intention at all!

We're all in it to help each other out, one love!

Collapse
etienneburdet profile image
Etienne Burdet

Let's be realistic: after your 10th job where you need to implement CSS tabs (or cards with header/footer, button with hover etc.), what will you do?ย Either copy-paste from old project, or start having snippet with parameters. Same with utility classes, same with spacing and typography.

Either way, you won't do it from scratch every job. In wich case you're just better off using a framework that does it well, with all the accesibility, style coherence etc.

Also:

  • much less need to document your CSS for your workmates. Somebody has already done the job and probably did much better than you will ever do.
  • The structure of components and utility classes will be easier to learn for your teamโ€”if not by yourself. By many orders of magnitude.
  • Why is this combination of classes not working?", "Ho, I need to fix that. In the mean time you can do this hack". Never get fixed.
Collapse
urielbitton profile image
Uriel Bitton Author

Sure that's why i encourage developing your own css frameworks from designs you created yourself!

Collapse
404jacko profile image
jacko

I'm not an expert on CSS frameworks, so please correct me if I am wrong, but can't you customize the designs from Bootstrap into your own? You don't have to use the templates they give you. I know that requires knowing at least some CSS, but in the long run, the title says it all: a framework.

Like I said, I never got into using frameworks because I couldn't wrap my head around them, so please correct me if I'm wrong. Happy coding to you and everyone else. ^^

Collapse
urielbitton profile image
Uriel Bitton Author

It is not meant to and it gets very complex to customize bootstrap css, there will be much clashing of styles, overriding issues, etc. Its a nightmare

Collapse
pmejna profile image
Przemyslaw Mejna

Great topic. I see lately a trend of "working with CSS frameworks is the way. Forget the CSS". It started to showing up on some YouTube channels recently. My personal stance on this is: you do what makes you happy and makes your job done. Some people are saying that CSS is slow and that's why they use frameworks. Personally I disagree. Working with SCSS you can maintain your style and make it faster and more custom than with libraries. Most of the time... Which means that there are exceptions. I wouldn't say stop using framework as I wouldn't say stop using vanilla CSS. I see the points what you (the author of article) pointed out: people ignore CSS and go straight into frameworks not knowing the CSS itself. If people start their adventure with frontend - learning frameworks with not knowing CSS is not a good way. But if you are really good with application logic and code and your work might be kinda nice looking and same time generic because of use of framework - this is acceptable in fast paced environment. Custom approach usually will bring better results - but this is not a rule. And if some Devs feels more comfortable working with frameworks - as long as they achieve desired look and targets - go for this guy's. I will stay with vanilla - I know CSS well enough so can work at least as fast as with frameworks but I can make less lines of styling with that and make all custom. Just My preference.

Collapse
iam_timsmith profile image
Tim Smith

I think it depends largely upon what you (the developer) need and enjoy doing. I like designing things and having complete control over the styles of my projects. Not every likes design or has an eye for it, and that's okay. If design isn't your cup of tea or if you are prototyping and trying to get something up and running quickly, I don't think there's any problem with using an existing tool such as tailwind or bootstrap. I don't think there's any way that one can make a sweeping claim like "no one should do this" because not everyone is in the same place as a designer or developer.

Collapse
codefinity profile image
Manav Misra

Right tools, right job. If focus is on building JS apps (or whatever similar) and/or writing CSS feels boring and/or prevents me from being productive b/c I just don't want to do it (talking about a friend here - not me ๐Ÿ˜‰), then using some type of 'CSS enhancement' is a good thing.
It doesn't have to be a full blown 'Bootstrap' ๐Ÿคฎ - but something (e.g. Tailwinds) that allows me to apply CSS knowledge without reinventing the wheel ๐ŸŽก every time and allows me a sufficient amount of customization (I like Bulma too), then sign me up! I will have a working, presentable app and focus on the parts that are most stimulating ๐Ÿง  for me, personally. Maybe it's fine for it to be 'cookie ๐Ÿช cutter' and/or look 'basic.' ๐Ÿคท๐Ÿฝโ€โ™‚๏ธ
If, on the other hand, I am doing agency work for big dollar ๐Ÿค‘ clients, then they deserve a truly branded and custom-crafted experience, so I would strongly reconsider using "other people's CSS" (you down with OPCSS? ๐Ÿ˜ผ)
Whatever suits one's interest, especially for a hobby project, do it! ๐Ÿ‘๐Ÿฝ

Collapse
mattwaler profile image
Matt Waler

Stop telling people what to do. Let them come to their own conclusions <3

Collapse
andrewbaisden profile image
Andrew Baisden

Freedom of choice is good let people use and learn what they want.

Collapse
urielbitton profile image
Uriel Bitton Author

100%, i don't force anyone to use or not use something. The title i agree was a little agressive but was only meant to instigate. I modified it slightly to be less aggressive.

Collapse
joccoo profile image
Jovan

I can agree totally just don't forget, time is money.

Collapse
urielbitton profile image
Uriel Bitton Author

For sure! why not re-use your own css code? Or perhaps use a framework but not make it replace your custom styling for buttons, cards, navbars, etc.

Collapse
ivanjeremic profile image
Ivan Jeremic

I use ChakraUI for React no chance to forget CSS since all props look like css.

Collapse
hrefel profile image
Muhammad Refel Hidayatullah

agree. but there is no harm in using the css framework, you will get new things from css framework. the most important thing is don't just use it but learn from it

Collapse
altinmullaidrizi profile image
altinmullaidrizi

I only prefer using Bootstraps Grid system, as that helps when making the site responsive.

Collapse
urielbitton profile image
Uriel Bitton Author

fair enough!

Collapse
coopercodes profile image
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

Stop telling people how to code, Mr. Gatekeeper.

I build CSS art, so as someone who is comfortable with writing CSS/SCSS, there is a time and a place for everything, some people aren't designers, maybe a company wants to punch out a proof of concept, while I personally hate Bootstrap I'd rather use it in a large scale app for maintainability and it leaves an easily recognisable codebase for future devs to pick up and go with.

Your mindset is closed.

Collapse
urielbitton profile image
Uriel Bitton Author

Not closed at all. Just suggesting. The title was a little aggressive on purpose but the point is more of an opinion!

Collapse
hxii profile image
Paul (hxii) Glushak
  1. You don't need to be a designer to write CSS by yourself. You do need to, however, learn your craft, as with anything else in life.
  2. Maintainability? If you're lacking the discipline to properly document your code, the problem is your own, and using libraries and frameworks is not going to fix it.
  3. Not wanting to use 3rd party libraries and frameworks does not mean your mindset is closed.
Collapse
coopercodes profile image
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

Not wanting to use a 3rd party library is literally the definition of a closed mind.

A time and a place for everything ๐Ÿคท๐Ÿผโ€โ™‚๏ธ

Thread Thread
hxii profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Paul (hxii) Glushak

Actually, Closed Minded literally means "having a mind firmly unreceptive to new ideas or arguments" as opposed to "Not wanting to use a 3rd party library".
Please, educate yourself on the difference.

Thread Thread
coopercodes profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

AkTcHuALLy pLeZ eDuCaTe Yr SLf ๐Ÿคฎ

Thread Thread
hxii profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Paul (hxii) Glushak

Thanks for putting the last nail in the coffin of your own "counter-argument" and for proving my point.

Thread Thread
coopercodes profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
๐Ÿงธ ๐Ÿณ๏ธโ€๐ŸŒˆ cooper-codes ๐Ÿ’ป ๐ŸŽฎ

You lost me in your screeching.

Thread Thread
micahlt profile image
Micah Lindley

Dev is not a place for ranting - it's a place for calm discussion. People are entitled to their own opinions, so please be respectful.

Thread Thread
btlm profile image
btlm

Actually, Closed Minded literally means "having a mind firmly unreceptive to new ideas or arguments" as opposed to "Not wanting to use a 3rd party library".

I worked for a boss who didn't want to use 3rd party libraries because he was unreceptive to new ideas or arguments. His main argument was "I don't want them because I don't know them". Very harmful for a dev team who wanted to work fast and efficiently but didn't want to reinvent a wheel. Actually, we HAD to reinvent a wheel because our boss didn't know any 3rd party library which could speed up our work (and we did).

Thread Thread
andreslozadamosto profile image
Andres Lozada Mosto

Hey man, I think you need move to a new place ๐Ÿคฃ

Thread Thread
btlm profile image
btlm

Hello, moved almost two years ago ;) actually whole dev team left.

Collapse
tomstreeter profile image
Tom Streeter

But using a CSS framework frees up time to use JavaScript frameworks that duplicate the functionality of native CSS.

Collapse
urielbitton profile image
Uriel Bitton Author

of course that's why i encourage to re-use your css code or even better create your own css framework!

Collapse
tombohub profile image
tombohub

I don't know man. With Tailwind I can clearly see what css is used so I don't think i will forget it. It also saves me time between switching back and forth the files.

Collapse
loouislow profile image
Loouis Low

Awww... C'mon, not again!