Introduction
As a developer, we all deal with plenty of recommendations, various options to choose and having no idea what to choose. One of the most common aspects that provide you job opportunities, having a high number of clients and income is your skills as a developer. This includes what you know or what you must know.
"What CSS framework should I know? " Have you ever heard this question or have you ever asked yourself this question? If yes! You are welcome, we are going to discuss it in this article, if not! You will. Therefore, let's explore it.
I've started my styling journey with CSS, and it was so great for me to create basic things even changing the background colour, however, it was too tedious to write lots of words. At the same time, I got many recommendations about bootstrap and when I start learning bootstrap, it was tough but I liked it. Bootstrap was so cool because everything that I needed was ready. I recently moved to tailwind and, it's also too great for me, I will discuss why I left CSS or bootstrap and What to choose.
No need to overthink, all involve a simple mechanism of adding style to your project and, we discuss what to choose.
CSS
Cascading Style Sheets (CSS) is a stylesheet language, it is very simple and easy for developers and, almost all beginners choose it. It is easy to become familiar with CSS and play around but, it takes much more time to master it. However, you do not need to be proficient in CSS, even just learning basics like page layouts, colours, and fonts is enough to get a job and make money, the next reason for learning CSS is that it improves your project speed as you use only the particular styles that you need.
You might think " If it is easy to learn and I can get a job then why do I need to learn other frameworks?"
Well, Using CSS is great but the reason I do not use CSS most of the time is that I had to write many lines of code for each page or simply it is really time-consuming especially when you have less time to complete your project.
It doesn't work always the same for all the browsers even sometimes doesn't work at all which is a headache for many developers, specifically when they need to test the compatibility, running of a program across multiple browsers.
Bootstrap
Bootstrap is a front end development framework. It is a massive collection of reusable and versatile pieces of code which are written in HTML, CSS, and JavaScript. Everything in bootstrap is ready and one of the reasons to learn bootstrap is that it has a responsive suction and is supported by many communities. Bootstrap allows you to design a website easier and faster and includes design templates for typography, forms, buttons, tables, navigation, modals etc.
If you want to use bootstrap on your project, you have to add all its CSS files even if you don't need them, and this will slow down your website. Bootstrap is still one of the most popular CSS frameworks and developers prefer to use it. I personally found it difficult at the starting, but It works great once you become familiar.
Tailwind CSS
Tailwind is a utility-first CSS framework used for building user interfaces. It is also one of the most popular CSS frameworks and is used by many developers. The difference between bootstrap and TailwindCSS is that Bootstrap provide styled component like button, nav etc while tailwind provide styled classes like flex, text-centre and rotate-90 etc.
Not only does it speed up production, but it offers so much flexibility and customisation being so low-level. Unlike Bootstrap, you are free to give any look you want for your project as you use only the style you need and the HTML will be styled too fast.
As the Tailwind CSS and HTML should be written together, it is hard to read and sometimes confuses developers while reading the code. It takes time to learn Tailwind as there are many classes and it doesn't include components too, therefore a developer must style the components which are already styled in Bootstrap.
Conclusion
You might already decide what to learn. There is no way to select a particular one as the best. Each of them is very popular and widely used by developers. It totally depends on you, the project you work on and your client preferences.
It is always advised to start with CSS if you are a beginner because it is simple or If you have less time and don't want to write many lines of code then Bootsrap is the best option and if you want more control over your style and if the HTML, CSS mixed code doesn't confuse you, go with Tailwind CSS.
That's all for now.
Thanks for reading, I hope you found this article useful.
Feel free to connect with me on Twitter :)
Top comments (13)
Personally, I'm a big fan of a clean HTML structure. Tailwind is a mess in that field, and harder to get around with.
I just use my own variant of bootstrap with sass and then pass everything through PostCSS to clean things up and build a slim bundle.
Yes, you are totally right. Tailwind mess the whole structure and I mention that too, even some people will not be able to read thee code because we use many classes in just one html tag.
Yeah Bootstrap is so cool and I personally used it lot.
I dont know much about sass yet but thanks for sharing that. It's helpful.
You wrote correctly, you need (if the person knows little) to start by learning css. Now, I think, a dangerous trend has emerged. People learn frameworks without knowing what they are using. Learning Bootstrap doesn't know css, that's unfortunate. The fastest investment is to learn the basics of css, html, to freely write something of your own, but then often learn the best approaches in this.
it hasn't recently emerged lol....it's been about 10-15 years since people jumped on jQuery without knowing JS, and after that React/Vue/Angular.
Same with CSS it's been Bootstrap, LESS, SASS, SCSS
All these people are pretty much useless when it comes to debugging sites because unless it's built with their tools and stack they can't figure out what's wrong.
Knowing the base languages is best, learning to use frameworks is useful, but should be understood to be secondary to understanding the languages if you want to be a decent developer.
I'm not even saying good or great, that takes attention to detail, great communication, the ability to see the big picture and understand business needs and UI/UX and so on, things that only come with time and experience, and only if you experience the right things.
As a friend once said when i asked him how many good developers there are in the world. "About 5"....the old i get, the more i feel this is true. Note, i'm not one of them, i just fix things.
You are right!
Maybe becoming a good developer is the most difficult task for a developer.
Exactly, the simple path is not always the best one.
Learning fundamentals might take time but it always build basics of learning.
Many frameworks out there do a nice job. I try more than one but after a while, I quit. I know CSS, why do I have to learn a new form of it? To have a well-designed button? I can save a button that I previously did it.
If I have to write text in orange color, for example, I do like this: {color:orange} or {color:#FFA500}. In Bootstrap I was not able to find a way, besides creating a new class using a custom style sheet that includes... {color:#FFA500}.
I am not criticizing Bootstrap (or any other framework), I just don't understand why to use it if you know CSS. And if you don't know it, better to learn CSS than Bootstrap (or any other framework). Once you have to do a variation will be easy and fast.
Instead, I find it much more useful ready-to-use examples of buttons or animation or other items written in CSS to apply in freedom.
Anyway, that is my opinion.
In Bootstrap u are using the styles that you want, too and there are predefined classes
Yes, Your style will override the original bootstrap's styles and in your project you will have two styles, and this will decrease the speed of the project. Still as I mentioned, Bootstrap is one of the most popular Framework and it's totally fine to use it.
Not really, bootstrap provides sass files for you to override at variable levels. Then you build the version of bootstrap you want
learn both, is fun. But CSS first...