CSS libraries reduce the time the developer takes to code a website. A quick Google search of the best or most popular CSS libraries will produce the usual suspects at the top — Bootstrap and Tailwind CSS.
However, one library missing from any of these lists is missing.css (pun very much intended). In this article, we’ll look at how missing.css compares to Tailwind CSS and explore examples of both libraries.
Jump ahead:
Missing.css is a new, nearly classless CSS library created by Deniz Akşimşek that offers a small and curated set of utility classes and custom elements:
According to its website, the goal of missing.css is to reduce needed intervention in HTML. This means the users can create web components with just plain HTML with the help of utility classes.
With utility classes, you’re going to spend less time building websites. Plain HTML means no CSS or JavaScript. One utility class can replace multiple lines of code.
The screenshot above shows that the missing.css website has a very simple UI. There are a few sites built with missing.css, found on the homepage, and they all look similar. On its homepage, missing.css claims that “Bootstrap doesn’t have the right vibe.” One criticism of Bootstrap is that sites built with it are too similar and very easy to spot. It seems missing.css borrowed some of Bootstrap’s vibes:
As you can see, the four websites have the same layout. All the content is in the middle of the page, with a lot of whitespaces on either side:
Although the sites have good responsiveness for the most part — the navbar becomes unresponsive past a certain point. For contrast, let’s also have a look at Tailwind CSS. Tailwind doesn’t have predefined components like Bootstrap. This means you can build more custom elements. You can find some examples in the showcase section of Tailwind’s website. Here are some screenshots of them:
The sites built with Tailwind CSS have more elements than those with missing.css. They have more images, animations, video backgrounds, and sliders; you name it. However, good UI doesn’t always equal good UX. It’s important to keep in mind that we make a lot of decisions based on visual cues. Despite this, Tailwind CSS still looks like it offers a lot more than missing.css:
Although, in its defense, missing.css did say that it’s “just right for small projects and personal sites” and that “Tailwind is too much.” That’s up to you to decide.
Before you can use missing.css, you need to link it to your project. After this, you can build the page however you’d like. You can start by simply linking a style sheet to your HTML with the command below:
<link rel="stylesheet" href="https://the.missing.style/v1.0.6/missing.min.css">
Because missing.css is nearly classless, using the right semantics will give your page some default styling. If you want more custom components, you can add some utility classes. You can find these classes and more information on how to use them in the docs section.
To get started, create a <main> HTML element in the <body> to hold every other element on the webpage. This will make your webpage adopt the general theme of missing.css with content in the middle and whitespace on either side. Next, let’s create a navbar. Go ahead and copy the code below:
<main>
<header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
</main>
Then, add some headings and a paragraph:
<div>
<div>
<div>
<h1>Missing.CSS</h1>
<br />
<h3>
Build websites with utility classes from the comfort of your HTML
</h3>
<br />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat
eveniet atque unde laudantium. Ipsa nam quisquam quod non officiis
porro? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eo
iure nemo a hic sunt incidunt?
</p>
</div>
</div>
</div>
This is how it should look with this markup:
At this point, you can add classes to modify the default styling. For example, you can add the navbar class to the <header> element to change how it looks. You can also alter the text’s size and the div’s look.
Here’s a demo of a simple webpage built with missing.css:
See the Pen
Missing.css demo by Oscar-Jite (@oscar-jite)
on CodePen.
You can learn more about creating other elements like forms, sidebar, titlebar, and so on in the official missing.css documentation. Additionally, you can modify your page layout with CSS flexbox and CSS grid layouts. Everything you need to build these components is explained in the documentation. Missing.css says you can overwrite its default styling with your custom style using variables, but it doesn’t show how you can do this.
That’s all there is to using missing.css. There’s not a great pool of information available, probably due to a low number of users. Overall, it’s straightforward to use, without a steep learning curve and is functional without any thrills and spills. If you want to practice using missing.css, you can use its playground here.
Tailwind CSS is a low-level, utility-first framework that lets you build web components within the HTML markup. It’s a very popular CSS library, with 10 million installs as of 2020. It’s fair to say a lot of developers are familiar with Tailwind. Before we go further, here’s a demo with a similar markup as the one above:
See the Pen
Tailwind demo by Oscar-Jite (@oscar-jite)
on CodePen.
You can install Tailwind CSS in four ways, but the easiest and fastest is with the Tailwind CLI tool. You’ll need to have Node.js installed on your computer for this to work. Then, you build out the page by adding utilities into your HTML markup. It’s a reasonably straightforward process. Every utility class has a corresponding CSS property or set of properties. You pick and use the ones relevant to the component you’re creating.
You can also easily add custom CSS properties if you have specific style preferences. Just like missing.css, you don’t have to leave the HTML markup. You can quickly build responsive layouts and don’t have to deal with unused or unnecessary classes. This will help to keep your file size small and help your pages load faster.
Tailwind CSS can be integrated with all the popular frameworks, and it provides specific guides to help you through installation:
Missing.css promises a few things, like creating unique sites with custom properties. But this isn’t anything new because Tailwind can also do this. You’ll use more utility classes if you’re building a large project with complex layouts and many components. On the other hand, if it’s a smaller project, which seems to be the selling point of missing.css, Tailwind can also do the job.
While they both use utility classes, Tailwind has a much more extensive collection covering every web component you can think of. There’s no apparent reason why you should use missing.css over Tailwind. Missing.css says, “Tailwind is too much,” but I feel it ultimately comes down to what the developer or user prefers more than anything else. The minimalism prevalent in missing.css may appeal to some more than others. In terms of usage, functionality, and performance, missing.css has no real advantage over Tailwind CSS.
Writing vanilla CSS can be tiring and time-consuming. Fortunately, CSS frameworks make it easier and faster to build websites. There are so many frameworks to choose from, each with different methods of approach. If you want ready-made components, you can use frameworks like Bootstrap. However, if you’re going to have more room for customization, you use Tailwind CSS…or a little-known framework called missing.css.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
React Shepherd stands out as a site tour library due to its elegant UI and out-of-the-box, easy-to-use React Context implementation.
Cookies are crucial to web development. This article will explore how to handle cookies in your Next.js applications.
Use the Tempo library to format dates and times in JavaScript while accounting for time zones, daylight saying time, and date internationalization.
This guide explores how to use the cron package in Deno, `Deno.cron`, to handle scheduling tasks with specific commands.
2 Replies to "How missing.css compares to Tailwind CSS"
Interesting article,l, but I use Fylgja CSS for both native styles and utility classes.
I’ve never heard of it, I’ll check it out. Thanks.