The World Of CSS. 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.

To a newcomer or even an experienced person glancing at the choices available can be too much confusing and overwhelming. There is literally a framework or library for everything. In JavaScript, you even have one for checking if the number is even and you will be amazed by its popularity Check here

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

My advice is, if you are a web developer then you shouldn't be afraid of CSS, actually, I used to hate CSS at one time, but then I met JavaScript (I promise this was the last one). Writing your own CSS can drastically improve your CSS knowledge.

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.

So I hope this post proved helpful for you. Give it a like if it helped you and share it with others.

Connect with me on Twitter: https://twitter.com/theshubhagrwl

You can see my work on my website: 
Shubh Agrawal (theshubhagrwl.vercel.app)

Thanks for spending your valuable time on this post.🙏

Comments

[RobertSeidler]

Nice article. I really like learning a bunch of stuff while rolling my own custom solutions. If it's just for fun, I would recommend using fewer libraries and try to understand, how the basic stuff works (if you don't already do).

But you are right, if you want to get stuff done quick using a few frameworks, will help most times. Althought getting the basics in, will speed everything up as well, just not immediately.

Also did you check out the is-even package more closely, it's amazing. The script depends on the similar successfull is-odd package. Gonna steal and improve on that, ty. I'm going to depend on all my previous work from now on, would be a waste otherwise (my upcomming projects: is_number -> not_number -> increment_operator -> decrease_operator -> add_operator -> ...).

[Nicholas Fazzolari]

As you said in your conclusion using CSS frameworks and libraries mixed with custom CSS is dependent on project scope and context.

For layout and responsive front-ends using a library/framework is going to speed up development time considerably and minimize technical debt overall. This holds especially true on products which are built for consumption (production grade commercial and government software solutions).

However, new developers should take the time to understand CSS on a deeper level. The best way to attain a deeper understanding of CSS is to clone or fork a copy of the Boostrap source files in SASS or Less. Given a newer developer already knows the basics of CSS and maybe a little beyond they can see what goes into building a responsive layout engine in CSS. Another thing front-end developers should do is build UI components and page layouts in CSS from scratch using a preprocessor or in pure CSS to learn or retain CSS skills.

Great post. Thanks for sharing your thoughts.