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:
- You will eventually forget css and not be able to use it when css frameworks are not an option
- Having custom styles is complicated (overriding issues) and will require multiple css files to be loaded.
- Designing custom styled apps and websites is awesome and very creative as well as challenging, why avoid this? (My main reason)
- Your designs will look generic, many people use bootstrap, material ui, etc. They all look the same.
- 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.
Latest comments (73)
You should use all the frameworks. Then you should build your own. Then you should use no frameworks. Then you should do all of this at the same time.
Seriously though, you can learn so much from code diving into these frameworks while also writing your own code. I'm the creator of AgnosticUI. But you know what. Feel free to not use a framework or snag a couple scripts you like in mine but add them to your own scripts. Learn core CSS. That's key I'd say. But yeah, I don't subscribe to the "never" or "always" or "use this not that" approach. Do it all 😄. It's like an athlete that never does drills. Or opposite only does drills and never gets match play in. You need it all. Figure out the balance that works for you. Learn the fundamentals. Build cool shit. There's no other way I can see that works ⭐ 💪 🙌
I found css frameworks useful when starting out as a dev. This changed as I got a few more projects under my belt, however. I got fed up with overriding CSS rules when trying to achieve the mission of pixel perfection while transferring designs from XD/Sketch/etc to a browser window. Redundant code introduced via unused rules or overrides from CSS frameworks hurt the performance of the app/website.
Dropping frameworks and writing clean and modular CSS (only the reset.scss would be copy/pasted across projects) to me was infinitely more rewarding and in my opinion made me a much better UI dev.
I understand that a lot of frontend devs have stronger foundations in JS and therefore CSS can be the least exciting part of a project, so in those situations I can see the big pro’s in using a CSS framework.
For me though, my favourite part of being a frontend dev is writing the styles/css. So for anyone else who shares similar sentiments to me and hasn’t tried creating a project without a CSS framework - I highly recommend giving it a go!
CSS frameworks are helpful to automate the work, but it deals with code directly.
I think a better automation are nocode tools because it doesn't pollute the code and keeps it clean. For example with Desech Studio you can automate the design to code flow by importing directly from figma, sketch, adobexd, and then you integrate with react, angular, vue directly.
This way you stay in the visual realm when dealing with html/css, while at the same time, be able to link to programming data attributes and hooks.
You nailed it...That's why I am building my own CSS framework. One step at a time: monalidor.com/on-building-my-own-c...
Well if you're a web developer its a good idea to learn basics of web design :)
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!
So why not create your own css framework and solve all the issues!
I use ChakraUI for React no chance to forget CSS since all props look like css.
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 :)
of course not that's why i always encourage to re-use your css code or even better create your own css framework!
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.
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.
I can agree totally just don't forget, time is money.
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.
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.
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.
I have designed many admin interfaces using custom code, Why do you need to use bootstrap?
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.
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. ^^
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
I would also add you are now required to use !important tags just about everywhere (which is something you should never use in a project done right)
exactly!
But using a CSS framework frees up time to use JavaScript frameworks that duplicate the functionality of native CSS.
of course that's why i encourage to re-use your css code or even better create your own css framework!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.