Should i use css framework

Related to the above are performance issues inherent in using fairly generic code, rather than something optimized for the exact use cases that you have. When trying to improve performance you will find yourself hitting up against the decisions of the framework. Speed, mainly, though we quickly found out it was a bit of a false economy because it created substantial technical debt in the long run.

While a framework might be a great way to get your startup quickly off the ground, and at the time of making that decision you are sure that you will replace it, is there a plan to make that happen?

When talking to conference and workshop attendees, I have discovered that many people have only ever used a framework to write CSS. There is nothing wrong with coming into web development via one of these tools, given the complexity of the web platform today I imagine that will be the route in for many people. However, it can become a career-limiting choice, especially if the framework you based your skills around falls out of favor.

Having front-end developers without CSS knowledge should worry a company. When the day comes to move away you would hope that the team will be ready to take on something new, not needing to remember or learn for the first time how to write CSS! Nicole Sullivan asked pretty much the same question a few days prior to my question as I was thinking about writing this article, although she was considering front-end frameworks as a whole rather than just CSS frameworks.

Jeremy Keith noted that precisely zero of the answers concerned end users. This was also the case with the responses to my question. In our race to get our site built quickly, our desire to make things as good as possible for ourselves as the designers and developers of the site, do we forget who we are doing this for?

Do the decisions made by the framework developer match up with the needs of the users of the site you are building? If you are considering replacing your framework or starting a new project without one, what are some of the things that you could consider in order to make that process easier?

If you are replacing the use of a framework with your own CSS, a good place to start would be to audit your use of the current framework. Work out what you are using and why. Consider how you will replace those things in the new design. You could follow a similar process when thinking about whether to select a framework or write your own.

What parts of this could you reasonably expect to need? How well does it fit with your requirements? Will there be a lot of code that you import, potentially ask visitors to download, but never make use of? I am a huge fan of working with pattern libraries and you can read my post here on Smashing Magazine about our use of Fractal.

A pattern library or a style guide enables the creation of documentation along with all of your components. I start all of my projects by working on the CSS in the pattern library. You are still going to need to write the documentation, as someone who writes documentation, however, I know that often the hardest thing is knowing where to start and how to structure the docs.

A pattern library helps with this by keeping the docs along with the CSS for the component itself. This approach can also help prevent the docs becoming out of date as they are tightly linked to the component they refer to. Consistency across the team is incredibly useful, and without a framework, there may be nothing dictating that. With newer layout methods, in particular, there are often several ways in which a pattern could be built, if everyone picks a different one then inconsistencies are likely to creep in.

Other than sending people in the direction of Stack Overflow, it seems that there are very few places to ask for help on CSS. In particular there seem to be few places which are approachable for beginners. If we are to encourage people away from third-party tools then we need to fill that need for friendly, helpful support which comes from the communities around those tools.

Within a company, it is possible that more experienced developers can become the CSS support for newer team members. If moving away from a framework to your own solution, it would be wise to consider what training might be needed to help bridge the gap, especially if people are used to using the help provided around the third party tool when they needed help in the past.

What I really need are some rules for making a not-terrible design, some kind of typography starting point, or a set of basic guidelines would replace being able to use the defaults of a framework in a lot of cases. I have discovered that people who have been immersed in framework-based development for a number of years, often have a view of browser interoperability which is several years out of date.

We have never been in a better situation in terms of CSS working cross-browser. Back in the days of IE8 I think people were relieved that frameworks took care of all of IE's quirks and bugs. 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 :. 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!

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. 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 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. 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 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. I of course know how to work with bootstrap, but I know that I am personally faster writing it my own. If you work with web UI in any way which includes, eg. 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.

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.

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. Sure that's why i encourage developing your own css frameworks from designs you created yourself! 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. 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.

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. 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.

That is not to say that they are of little help. No, They are perfect for the right person and the right person being someone who has a high-level understanding of CSS.

Have a good understanding of Cascade and inheritance. CSS cascade and inheritance are very important in understanding how to override some bootstrap classes and have the effect that you desire, since Bootstrap uses the Important keyword. You can follow this link to learn more about CSS inheritance. Boostrap uses flex for its grid system.

So in other to make the most of Boostrap I would suggest you get a very good understanding of flex. Read more on Flex here. Have several tested and fully responsive CSS only websites. Join Microverse. Microverse is a remote school for remote developers. Boostrap and other frameworks are great and good to help get a website up in no time. In the words of Kent Beck. Before you actually begin using Boostrap or any other CSS framework. I would suggest you get a firm understanding of the language itself.