CSS Framework Research

Owned by Mohit Saini
Last updated: Sept 07, 2023
2 min read

As discussed in one of the TSC meeting, Here's my research work to decide what to choose as the CSS framework.


CSS Framework

Pros and Cons

CSS Framework

Pros and Cons

Bootstrap

Advantages

  1.  Comes with pre-built components like Navbar, buttons which are dynamic as well. Which means there is no need to add JavaScript in it to add functionality. Like Drop down menu opening and closing functionality.

  2. There is less need to write CSS in the CSS file. we can use classes in the JSX code to get the same results.

  3. The learning curve is easy for a beginner. If you have some idea about CSS you are good to go.

Disadvantages

  1. We won't be using prebuilt components other than card or navbar. because it limits the website look. 

  2. It doesn't have customization's like Tailwind in terms of colors, defining screen sizes, and much more.

Note:- We will be using React-bootstrap instead of simple bootstrap as it has the capability to work with React. simple bootstrap is made for HTML only.

Tailwind CSS

Advantages

  1. Defining object sizes for different screen's, lot more customization options like setting different themes, toggle options, and the ability to give premium effects can be possible with the help of Tailwind.

  2. Combination of Tailwind and Daisy UI library helps to bring pre-built components which are dynamic also.

  3. Growing CSS framework. Many companies and people prefer Tailwind more these days.

Disadvantages

  1. The learning curve is big for a beginner. someone who is expert in CSS or have played with Tailwind for a while can do most of the things in code.

  2. As the inline classes in the JSX code increases, it makes the code messy and hard to debug at times.

CSS (without CSS Framework)

Advantages

  1. Just learn CSS, and you don't need anything else to learn.

  2. Everything is possible with CSS, but it requires more time and effort to code the project from starch.

  3. Very easy to debug. just find the class name and make changes accordingly.

Disadvantages

  1. Code will get very big in CSS file. because we have to code in such a way that final project should be consistence for all the devices.

  2. Setting different themes like in tailwind is not possible in simple CSS.



Still not sure? 

Watch Video - https://youtu.be/2V5oq1X1NXo