Why SASS Should Be the Next Step After CSS, Not Bootstrap

Okay, so I have gained confidence in HTML and CSS, now what? I should start learning Bootstrap right? Absolutely wrong, if you want to become a more efficient developer in the long run then there is a better learning path. If you want to know more then please, let me explain.

Hi! My name is Subhajit and I’m a UI/UX designer & frontend developer. In my journey of being a designer & developer, this question has bothered me a lot. Also, it happens to be the junction where most of the new developers tend to take the wrong turn. Why you should not learn Bootstrap right after learning vanilla CSS?

In the world of development, many developers (both frontend and backend) have the impression, that the faster you can come up with a solution, the better. Well yes, in many cases that’s true, but in the majority of situations and long-term effectiveness, you will find that there is another parameter that is the 0^th law in development, which is the efficiency of your code. Efficiency in the development phase doesn’t necessarily mean fast. Yes, the result should have fast execution time, but in the development phase sometimes efficiency may take a step or two more than the fastest way available. But in long run, those few extra steps return a huge value to the overall project and end up becoming the best way.

The story of CSS and Bootstrap is the same.

What is Bootstrap?

Bootstrap is the most popular CSS framework for developing responsive websites. It is the world’s most popular frontend open-source toolkit, featuring SASS functionalities, a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

By the definition, it might seem evergreen, but the problem lies in the “Prebuilt” part. If you take a deep dive into projects which are using Bootstrap, you‘ll find that majority of them are barely using the brand sticker as a tag and don’t understand the true purpose of Bootstrap. Bootstrap is a framework whose main purpose is to make the development process faster by providing “Prebuilt” options. But when the project requires fine adjustments in the styling, custom creative designs. The majority of the styling is done through custom CSS.

If we are importing Bootstrap just to use 10% of its power then don’t you think it’s better to not use it at all and find a better solution? In most of the projects, we end up overriding the preconfigured styles which Bootstrap provides. This practice makes the handling of styles difficult in the long run. The use of the “!important” keyword in CSS is also a subject that should be avoided unless necessary. On the other hand, using default Bootstrap in every project ends up making the project similar to each other, which ultimately limits our creativity and knowledge.

Bootstrap Disadvantages

Weight: Bootstrap by itself may not be huge, but it is huge when we take into consideration, how much Bootstrap we actually use. Using Bootstrap also invites the use of jQuery and Bootstrap JS. All these resources end up piling and will not be used even in half.

Components: Lack of? Nope, exactly the opposite. Bootstrap has so many components and utilities, that we rarely use even half of them. We may have a way that with NodeJS we can compile and use only necessary parts, but for basic servers with cPanel, this is not a possibility.

Customization: While Bootstrap is easy to use, it's not so easy to customize. Most of the time we end up using “!important”, which should be avoided unless it’s necessary. Having to override so many preconfigured styles given in Bootstrap is just like having to create custom CSS from start.

This is where preprocessors come to rescue us.

What is Preprocessor (SASS, LESS, Stylus)?

A CSS preprocessor is a program that makes us able to create CSS from the preprocessor's unique syntax. Programs like SASS (Syntactically Awesome Style Sheets), LESS (Leaner Style Sheets) & Stylus are preprocessor scripting languages that are interpreted or compiled into Cascading Style Sheets (CSS). These are a superset of CSS.

The main purpose of the preprocessor is to reduce the repetition of CSS. Therefore give a much more efficient development environment. It provides a functional approach to format CSS into a more structured and organized code. Let’s take SASS for example:

Repetition: To reduce repetition of code SASS provides “mixins”. It is a custom-made component that can take arguments to behave differently in different situations.

Management: At the end of a project we always end up with a massive “style.css” file. It sometimes may contain tens of thousands of lines. Although we can separate CSS into different files and import them separately. It results in making multiple “HTTP” requests which is another optimization headache to deal with. With “import” functionality in SASS management of files becomes a breeze.

Nesting: Another amazing benefit of the CSS preprocessor is the syntax. SASS allows us to use a nested syntax, which results in a cleaner way of targeting elements.

Flexibility: SASS has become the most used CSS preprocessor in frontend development. Some of the popular front-end frameworks like Bootstrap and Foundation have been developed with SASS.

Learning Curve: The learning cure of SASS and its alternatives is very flat and is very much friendly for new learners. Having a basic knowledge of functions, project structure, and core CSS features is all it takes to master SASS.

And there are so many more functionalities that make a developer’s journey much more efficient than taking the Bootstrap route.

Conclusion

Am I completely against the use of Bootstrap? Nope, absolutely not.

I can never deny that Bootstrap does provide a way to develop something incredibly fast if we are using it properly. There are situations where Bootstrap is the ideal solution. For example :

1. If we can use several components of Bootstrap.
2. Most important if we’re short on time and for the time, we need a solution that works fine out of the box.
3. If the custom design flexibility is not so important for our project.

CSS preprocessors also have their own share of troubles. For example :

1. SASS can’t be rendered in the browser directly. So, we will need a compiler to ultimately turn it into plain CSS. It can be deployed on the server.
2. If we are in a situation where hotfixes are necessary and the project is handled by Junior Developers, who are not so much experienced with preprocessors, then vanilla CSS or Bootstrap can become the best option.
3. If the project is not set up properly if a proper structure is not followed and we don’t use SASS functionalities like “mixins”, “include”, etc. then also it becomes a waste of effort to use SASS.

That’s why it is not a topic of advantages or disadvantages. It is an aspect of being more efficient, productive, and picking up the right tool to learn in our development career. Every language, every framework, the library has its place to shine. But there is also a need in order to make the most effective route in our journey. And this is where I think Bootstrap is not the next thing after learning CSS. We should focus on learning a preprocessor like SASS.