Introduction
Currently, I am participating in the bootcamp for the full-stack web development, and started and finished the simple project using the React Framework, and in order to make your website look presentable, you cannot forgo using the HTML's best friend, CSS. Even though I could have chosen the path of creating the separate CSS files and defining various CSS rules there, I chose to go with one of the most well-used CSS frameworks at the moment, which is TailwindCSS. So, at the very outset of my journey to web development, I was utterly hopeless when it comes to designing the website, and for that fact, TailwindCSS has basically been my go-to when it comes to styling my website. Despite its reputation for being verbose - to achieve something complex, you end up with an insanely long string of various classes - I gave it a shot and was instantly hooked on its usefulness and quickness for being able to come up with the somehow decent-looking website. Thus, I was no longer hopeless, and found creating the website much more enjoyable.
Recently, however, watching the instructor use some sort of the CSS-related library from NPM that resembles the plain CSS, it got me questioning whether what I am doing - using the approach of TailwindCSS - is really the right thing to do or not. So I started googling basically something along the line of Is TailwindCSS bad? and wound up in the thread that was wildly varying in opinions on which one is better. To get myself really acquainted with both the pros and cons of what TailwindCSS is doing versus the basic plain CSS - Semantic CSS, I thought that it would be good to do due diligence spending some time learning and comparing both pros and cons of both approaches, especially for those that are stuck in making a choice between those two.
For this post, I am going to go over each, and present both their pros and cons for the readers to equip with knowledge for making a right decision for themselves.
Semantic CSS
Semantic CSS refers to so-called, the vanilla CSS that we first approach when we learn CSS. There are often three ways of styling various HTML elements using the plain CSS:
- Use the inline style for an element that you want to apply designs to.
- Use the
<style>HTML tags inside an HTML page, for specifying the CSS rules for a specific page. - Use an external file whose name ends with
.css. There, you may specify a bunch of rules in the same way as the approach above; however, you may import those files to one or more pages, and apply the styles to the HTML elements simultaneously.
Here is usually how we use the plain CSS, for example:
<head>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
color: red;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>
</div>
</body>
The approach above is what we do with the approach number two. Basically, it requires one to create a CSS rule with a name - in the example above, it defines a rule named .flex-container that must be used with the class attribute in one or more elements. You are not limited to creating rules with mere classes, instead, you may even go further, by separately designing each element based on the value of its id attribute by prepending it with #, as well as the name of the HTML tag, which requires no special letter to be prepended.
Some of the advantages for the plain CSS include:
- Customizable - Obviously, this is the biggest advantage, but for those that must be in complete control over how the design of the website should be, then this is for you. Using the vanilla CSS makes much more sense for those that want to create something complex that involves animations and transitions. With the right amount of creativity and know-how, the sky is the limit when it comes to coming up with what you like!
-
Succinct - As opposed to forcing the source code of the HTML page with the bombardment of the inline classes like TailwindCSS, you can separately define CSS rules in external files ending with
.css, and import them to the HTML pages. Like I said, this may be a major advantage to those that prefer not seeing the source code filled with the bunch of classes. It looks way cleaner! - Fast Rendering Speed - Not sure if it really matters, since there is about a 0.4-second difference when it comes to it, but based on the metrics of both LCP and FCP. FCP (first contentful paint) is a metric for how long it takes for a user to see the very first item on the page, whereas LCP (largest contentful paint) is a metric for how long it takes for the page to adequately render to be usable by a user. The vanilla CSS has apparently the advantage, which kind of makes sense, I guess due to the fact that the files of TailwindCSS are a lot bigger than that of the vanilla CSS?
- Learning - Actually, there is no better way to learn CSS at a much deeper level than trying to use it without the help of frameworks. You can definitely achieve a lot of insanely cool stuffs with vanilla CSS, and if that is what you are looking for and you want to learn more about CSS in general, you should at least try to stick with vanilla CSS, before moving on to frameworks, such as TailwindCSS, that may or may not make your life easier.
Tailwind CSS
TailwindCSS is the CSS framework that provides a set of utility classes, which basically allow a user to design without creating a custom CSS file. All you have to do to use TailwindCSS is to download all the necessary files via CDN or NPM, depending on the medium you are working on your project, and simply include the available classes to HTML elements in a page. Let me show you an example below.
<div className="grow w-full text-left px-10 flex flex-col justify-center items-center text-white text-xl gap-5">
<h1>Select a board :(</h1>
<h1>Or create one!</h1>
</div>
Yes, it may look extremely verbose and confusing to many people. Since you have to be aware of what each class does to the looks of the element, there may be a bit of a learning curve for those that first try this, but once you get used to its class-based approach and functionalities, it becomes less of an issue moving forwards. Some of the advantages of using TailwindCSS include:
- Development Speed - The ease of applying a predefined set of classes to elements greatly increases the web development. Also, you don't have to name each CSS rule, for the fact that everything is already named for your convenience.
- Maintainability - Imagine the situation where you have to revisit the old HTML code that has been sitting on your computer for a long, long time. The consistency in the name of every class throughout its evolution allows one to easily revisit and understand the code with ease. Imagine hiring a new developer that knows TailwindCSS and goes through your company's source code, that would greatly save time from having to educate a new developer on the design system.
- Frequent Update - One thing that I didn't think about, but if you are frequently updating the pages of your website, then it may be better to approach using TailwindCSS. The reason is that the frequent update of the website may make keeping up with CSS rules much more arduous, than being able to directly adjust the looks of the element individually by incrementally changing the classes of each element?
- Consistency - Using a predefined set of classes that are readily available for you throughout the entirety of the application provides the website with much more consistent looks. People who came up with this framework definitely took into considerations the need for a consistent design system. If you are not a designer, but somehow need to come up with a decent-looking UI, a gigantic mess of inline classes, with which TailwindCSS is associated, becomes less of a big deal.
- Responsive - I guess this is one of the biggest selling points of TailwindCSS, but yes, you can easily implement the responsive design of the website, by using what we call the breakpoint. Here is an example:
<div className="w-full md:w-[300px] ...>
- The element above has two classes,
w-fullandw-[300px]. As you can see, in front ofw-[300px], it has themd:, which is a breakpoint that tells the browser to resize the width of the element to300px, upon the width of the viewport exceeding768px. The breakpointmdis associated with768pxby default, and if you would like to map the breakpoint with a different value, you are free to do so with the use of the config file!
What's better?
There is no clear, right answer to this, because both have its own strength that make each stand out over one another. I guess it all comes down to this:
- If you are working on designs that are highly specific and require granular control over how it should look, then Semantic CSS may be the choice for you.
- If you are working on a project that requires fast prototyping and very little of animations and transitions, you may easily get away with TailwindCSS. Not merely limited to its predefined set of utility classes, you can easily customize it to your likings, just as well as Semantic CSS.
If anything, you can always mix the both approaches and simply take advantage of each approach! Like I said, there is simply no right or wrong answer. Both approaches warrant use cases, and you can't go wrong with any one of them. If not, then try things like SASS, which seems like another method for utilizing CSS in a fancy way.
I will continuously update this post, since I didn't spend too much time on organizing my thoughts on this topic and its structure. This post feels way too incomplete and horribly thought-out, so I will keep updating this. Thank you.
Top comments (0)