Should you write your own CSS or use any Library?
Web Development is a booming field, there are thousands of web developers and hundreds of technologies that assist the awesome developers in achieving their goals.
Anyways, coming to the topic in the midst of so much pre-written code that can reduce a lot of work for you, writing all the code from scratch can look like a stupid question.
In short, the answer is totally dependent. There is no clear answer to this question. The answer totally depends on you and this is what I have tried to explain in the rest of this story.
I have tried to keep it ASAP (As Short As Possible)
Let's Discuss more.
Advantages of Libraries & Frameworks
- Pre Written Code → Lot less work to do
- Consistency → Styles look the same across the website
The biggest and the most obvious advantage of the prewritten code is that it is “pre-written” so you have to do a lot less work in writing everything from scratch. Like if you are using React and you use Material UI then you get a ton of subtle animations already in the button styles, the Grid System which is one of the most useful things in MUI and for the most part you don’t have to worry about your site being responsive.
Another awesome thing you can achieve is “consistency”, i.e. your design looks the same on your whole website. This is because you are mostly referring to the same components.
Disadvantages of Libraries and Frameworks
- Pre-written Code → Can be hard to modify code
- Consistency → Code can be consistent across many ‘other’ websites
- External Libraries can sometimes be bulky
It is a fact that everything has advantages and disadvantages unless it’s VSCode (No more bad jokes ahead!) so does this.
One thing to note here is that these are the disadvantages according to me, so it is subjective and may or may not apply to you, I have tried to give you a general idea from my experience.
The first negative point according to me is the “pre-written” code. This is a subjective point as it totally depends on the person doing the thing. For a beginner, it can be difficult for her to make a lot of customizations. I have personally felt this while working with MUI for the first time, it took me a good amount of time to figure out the customizations I wanted to make. But if you are a bit experienced then you can get along with this pretty easily.
The other disadvantage that I think, and is a norm among the people who use Bootstrap is that the sites made with Bootstrap look like “Bootstrapped Sites”. What I think is, this is true for a beginner but an experienced person can easily get around this. So again it depends.
Another issue can be that the extra libraries can be “bulky”, I guess this was the case with Bootstrap because Bootstrap 4 used jQuery which was quite heavy. I think jQuery is removed in the later version of Bootstrap. Feel free to correct me if I am wrong.
Addressing the Elephant in the Room
Personally, I have used both ways to create websites.
I one project I used MUI and tried to customize it a lot (https://github.com/theshubhagrwl/MyMovieTime) while in the other I used only Custom CSS (https://theshubhagrwl.vercel.app/) and as a user, you won’t be able to spot the difference but the main difference comes in the development time and the knowledge of CSS you have.
The other and sometimes more important thing is the amount of time you want to spend on a project. If you want to get some project done quickly and not caring a lot about the design then it is better to use some framework or library because it will have a ton of stuff done for you.