The world of programming has changed a lot. There was a time when writing code was like an art. Principles of programming were the backbone of any software. They are still there, but due to the shift in technology, pace of projects, and change of mindset, we have drifted away from those fundamentals.
I want to show how technologies around us still utilize these fundamentals and doing great in market. One of them is Bootstrap CSS.
That’s why I have decided to share my observations on Bootstrap CSS. It’s not that great now and there are other frameworks but let’s see what Bootstrap does right and what we can learn from it.
So, let’s begin.
Understanding the basic design of bootstrap
Bootstrap is based around css classes. It’s filled with components that are reusable and composable. Then, it has classes for building layouts, range of form components, some helpers and then some utilities. By combining them all, we can build good looking, functional and user friendly web pages very quickly.
But what can we even learn from Bootstrap? Let’s find out!
Principles of programming in Bootstrap?!
It may not seem at first glance, but bootstrap is using many common programming principles in front of our eyes.
KISS: Keep It Simple, Stupid
DRY
Single Responsibility Principle
Separation of Concerns
Law of Demeter
KISS: Keep It Simple, Stupid
Bootstrap is quite simple to pick and learn. Once you understand how they have structured the framework, it’s easy to get up and running with. Need a button? Add btn class and it’s done. Worried about responsiveness? Got you covered with media query utilities. And that’s how Bootstrap utilizes our first principle.
Learning: Keep your code simple and to the point. Overengineering only adds complexity.
DRY: Don’t Repeat Yourself
When we first start learning CSS, we tend to write a lot of duplicate stylings, classes etc. But in Bootstrap, we have these component classes that helps us avoid writing duplicate css. If there are two cards in different sections, it’s most likely that we are using the same card class in both of them and making small adjustments as per requirement.
Learning: Try to avoid duplicate code and leverage functions, classes, utilities to create reusable components.
Single Responsibility Principle: (S in SOLID)
Every single class in Bootstrap has one responsibility and one function. A btn class is only designed to build button structure. It is not adding extra margins around and doing some crazy stuff with sibling elements. A container class is only responsible for keeping content in center and in a container, nothing more. Same goes for row class, margin utilities etc. It avoids a ton of complexity in building layouts.
Learning: This principle is easy to understand but hard to master. Make sure your components and entities are not fulfilling multiple responsibilities. One entity equals to one responsibility.
(SoC) Separation of Concerns
A component in Bootstrap doesn’t interfere with another component directly. Each component, layout class, utility and helper, addresses a specific concern and has a specific job. A container class is independent of row class. row class handles the 12-column grid system, and container class is concerned with only centering and specifying width of content. Imagine a class that is a mix of both (I know you have written such CSS, because we all do)
Learning: Avoid mixing concerns and features. Try to divide it in chunks such that each chunks solves a particular problem.
Law of Demeter: The principle of least knowledge
This one was new for me. The Law of Demeter says that each component should have only limited knowledge of other components. So, if something is closely related to a component, it can have a limited knowledge of it, but not any stranger component. “Only talk to your immediate friends”
In bootstrap, form components and classes only affect form related components, or a btn modifier class only affects a btn and not any other entity.
Learning: Take every parameter as an info. Entity which needs the info, is the only one to have the info and not anyone in between. This also simplifies testing and makes code more readable.
So, these are some of the points that I observed, and I am sure there are many other things that I have not noticed just yet. If a CSS framework can apply these principles and become the most used framework, then maybe we can also take a step back and try to apply these principles that not only solves the problem at hand but also adds value to our projects.
Even today, there are gems from which we can learn and improve our understanding. Open source is filled with such learnings. I encourage everyone to read other’s code, understand their approach and try to apply the same and see how it helps and how you can improve.
That’s it for this one. Hope you find it helpful. Feel free to share your observations!
