Guide: Quick Guide to the Utility-first CSS

CSS is an easy language to learn (and implement) to create a beautiful website. However, when it comes to implementing CSS at scale, it’s not that easy. For large-scale websites and applications, CSS becomes very difficult to enroll. CSS specificity is crippling up, and so is the use of! important often inevitable and eventually adds up to the CSS file size. Well, the good news is that web developers have come up with different methodologies to help better write and organize CSS, such as BEM, OOCSS, SMACSS and ITCSS. We’ve covered some of these methodologies in our previous posts, Understanding CSS Writing Methods and Introduction to ITCSS for Web Developers. In this post, we are going to look at another methodology called Utility-first CSS, which at the time of writing is rapidly gaining popularity among the web developer community. Let’s see how it works.

Utility-First CSS: How It Works

Traditionally, we write a CSS class that can contain the colors, size, borders, margins and shadows styles as below: .foo {margin: 0 auto; padding: 10px; border radius: 4px; box-shadow: 0 10px 30px -2px rgba (0, 0, 0, 0.1); background-color: blue;} With Utility-first CSS, every class is a low-level CSS composition. Instead of creating a class that applies a lot of different CSS rules, it just contains very specific rules. If I want to add a rounded corner, we’ll call it .rounded-sm: .bg-white {background color: white;}. rounded-sm {border-radius: 4px;}. shadow-md {box-shadow: 0 10px 30px -2px rgba (0, 0, 0, 0.1);} If you want to apply a white background color, a small border radius and a shadow, you need to add these three classes.

At first this may seem like a mess. Since you need to add more styles, you need to add more classes to the div. But once you build something like this, you will notice some of the benefits, because with it you:

To create a custom style without actually writing a custom CSS and without having to create custom class names. Naming a class is difficult, especially on a large-scale website or application, and we often end up up give our classes ambiguous names such as .box, .card, .container, etc. To change something without worrying about it breaking of the other pages or components, making website CSS easier to maintain.

Utility-first CSS is not a completely new paradigm. It has a different name called Atomic CSSHowever, the web community didn’t quite buy the idea, so it didn’t gain enough traction to make it a popular paradigm to write CSS. Called a new framework Tailwind CSS came up that this idea of ​​Utility-first CSS yielded, and it suddenly makes sense. So what makes Tailwind CSS different?

Tailwind CSS

Tailwind CSS was created by Adam Wathan. It is shipped as an NPM module. We can install it easily by typing this command below: npm install tailwindcss In addition to the Utility classes, Tailwind is useful features as are guideline @tailwind and @apply The following codes import the built-in Tailwind styles – the basic styles that address the browser’s default style consistency, similar to Normalize.css, the components and the utilities. @tailwind basis; @tailwind components; @tailwind utilities; With the @ apply directive, you can put together different stylesThis statement is useful if you have components with repeating utility classes. A well-known example of this is for one buttonIt is practically more convenient to add a .btn class like below instead of adding a bunch of different classes. button class = “btn”>Buttonbutton In this case, the @apply is useful for compiling these styles into one .btn class. .btn {@apply bg-blue-400 text-white font-bold py-2 px-4 rounded;}

Optimize file size

Another advantage of TailwindCSS is that it works very well with PurgeCSS to remove unused styles on your websiteAnd since you rarely create your custom CSS and classes, the result from your stylesheet can be significantly small. Firefox Send can send their stylesheet with only 4.7kb (gzipped)!.

Code editor integration

When using Visual Studio Code, you can further increase productivity with the extension: TailwindCSS Intellisense. This extension allows auto-completion for TailwindCSS classes as you type. It supports a variety of file types including HTML, Vue and PHP. So, these are some of the main advantages of using TailwindCSS compared to other CSS frameworks. Rather than loading a bunch of stylesheets, Tailwind CSS comes as an NPM module. It offers configurations that allow us to produce CSS that meet our needs and result in a smaller style sheet.

Packing up Up

Changing the way we write CSS isn’t always easy. It means we have to unlearn what we are already used to. Utility-first CSS may look weird at first, but as mentioned, once you get used to writing CSS this way, you will find your productivity has increased. Have you tried using utility-first CSS in your project? Let us know about your experience in the comments section below.

Quick Guide to the Utility-first CSS: benefits

[wpsm_list type=”star”]

The Quick Guide to the Utility-first CSS tutorial is free . This guide already helps so many users follow up with interest in a timely manner. The price of the Quick Guide to the Utility-first CSS guide is free.

[/wpsm_list]

Faq

[wpsm_accordion] [wpsm_accordion_section title=”Tutorial summary of Quick Guide to the Utility-first CSS”] In this guide, we told you about the Quick Guide to the Utility-first CSS; please read all steps so that you understand Quick Guide to the Utility-first CSS in case if you need any assistance from us, then contact us. [/wpsm_accordion_section] [wpsm_accordion_section title=”How this tutorial helping you?”] So in this guide, we discuss the Quick Guide to the Utility-first CSS, which undoubtedly helps you. [/wpsm_accordion_section] [wpsm_accordion_section title=”What is actual time in which this method complete?”] The time to complete the Quick Guide to the Utility-first CSS tutorial is 10+ minutes. [/wpsm_accordion_section] [wpsm_accordion_section title=”What are the supported Device?”] PC Laptop or Desktop [/wpsm_accordion_section] [/wpsm_accordion] [wpsm_divider top=”2px” bottom=”15px” style=”fadeout”]

Final note

I hope you like the guide Quick Guide to the Utility-first CSS. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Quick Guide to the Utility-first CSS, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Quick Guide to the Utility-first CSS”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Quick Guide to the Utility-first CSS, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.