CSS frameworks & are these enough to ignore traditional CSS?

As the use of CSS for web designing is increasing, it is very complicated to use too.

Having a framework helps in many ways, some of which are:

1. Consistency: Provides a set of predefined styles that can be easily applied to your HTML elements, to make designs consistent across different pages and devices.

2. Ease of use: This can make it easier to build designs quickly and with less code.

3. Responsive design: Many CSS frameworks include built-in support for responsive design.

4. Cross-browser compatibility: CSS frameworks often include styles and techniques that are designed to work consistently across different browsers.

Okay, it's understandable, frameworks are good to use, but is it enough to ignore CSS forever and do work only with frameworks?

As a beginner web developer, one usually starts with HTML, and then CSS... and then learns a framework like Tailwind, Bootstrap, Bulma, etc.

Let's take an example of tailwind which is gaining a lot of traction in past years-

Tailwind CSS is a utility-first CSS framework that allows you to style elements using a set of predefined CSS classes. These classes are built using traditional CSS concepts like selectors, properties, and values.

It is not necessary to have a deep understanding of traditional CSS in order to use a utility-first CSS framework like Tailwind CSS, but some basic knowledge of CSS can be helpful. Tailwind CSS is built on top of traditional CSS and uses many of the same concepts and principles.

You definitely get many benefits from using a utility-first CSS framework like Tailwind CSS:

• It can be faster to style a website or application using utility-based CSS frameworks like Tailwind CSS since you don't have to write custom CSS for every element.

• Utility-based frameworks can be more flexible and easier to customize than traditional CSS frameworks, which often come with a set of predefined styles that can be difficult to override.

• Utility-based frameworks can be more scalable since you can add or remove classes as needed without having to worry about managing a large set of predefined styles.

But to only focus on the framework and not the base itself, we have a lot of limitations too:

• Utility-based frameworks like Tailwind CSS may not provide as many pre-designed styles and components as traditional CSS frameworks, so you may have to write more custom CSS to achieve certain design effects.

• Utility-based frameworks can generate more CSS code than traditional frameworks, which can affect the performance of your website or application.

• It can be more difficult to maintain a consistent design style using a utility-based framework since you have to manually add and configure classes for each element rather than using predefined styles.

The best example of having tailwind CSS as our main focus of work is responsiveness.

In Tailwind CSS, responsiveness is achieved through the use of utility classes that apply styles based on the desired viewport size. These utility classes are added to your HTML elements to specify the styles that should be applied at different viewport sizes.

Here is an example of how you might use utility classes in Tailwind CSS to create a responsive design:

<!-- This element will be full width on all viewports -->
<div class="w-full">
  <!-- This element will be 50% width on small viewports and above, and 100% width on medium viewports and above -->
  <div class="w-1/2 sm:w-full md:w-full">
    <!-- This element will have a font size of 2xl on small viewports and above, and a font size of 3xl on medium viewports and above -->
    <p class="text-2xl sm:text-3xl md:text-4xl">Hello, world!</p>
  </div>
</div>

In this example, the outer div element will always be full width, regardless of the viewport size. The inner div element will be 50% width on small viewports and above, and 100% width on medium viewports and above. Finally, the p element will have a font size of 2xl on small viewports and above, and a font size of 3xl on medium viewports and above.

Here is how this code might look using media queries in normal CSS:

.w-full {
  width: 100%;
}

@media (min-width: 640px) {
  .w-1/2 {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .w-full {
    width: 100%;
  }

  .text-2xl {
    font-size: 2xl;
  }
}

@media (min-width: 1024px) {
  .text-3xl {
    font-size: 3xl;
  }
}

It's easy to understand how this framework helps us.

The main question is still there, can we ignore traditional CSS to get our work done with Tailwind CSS only?

The clear answer is, NO!

It is definitely the case that, you can use Tailwind CSS without traditional CSS, but the thing is, for how long?

If you are forgetting your concepts of CSS, you will not be able to be a good web designer. At every point of code, you will need strong CSS, to get the best-desired result with the design, to "debug" your code, and to adjust the layout of the webpage.

That's it for this blog. Go and revise traditional CSS, now. So, you can rely solely on tailwind for the next 6 months!

Keep learning

Keep hustling🫡