With the rise in utility-first CSS libraries, I wanted to dive deeper into why that’s the case, and why we I think it’s valuable to re-invent the wheel.
Since many mainstream frameworks include kilobytes of never used CSS and tons of styles that need to be overridden, it’s not hard to see how most frameworks do too much, adding unnecessary bloat and slowing page speeds. But beyond heavy frameworks like Bootstrap, there are a rising number of utility-first frameworks, such as Tailwind, that don’t have the bloat and customization issues like Bootstrap and their counterparts1. Plus, with tools like Sass and modern utilities like CSS flexbox and grid, it’s never been easier to build custom frameworks.
With this in mind, I sought to create a replacement–one that also passes Google’s Lighthouse and that has my own personal flair.
So, why reinvent the wheel?
Oftentimes, I found the best way to learn is to do things on your own. While our individual implementations might not be as advanced, I think it’s enlightening to go through the process without a framework and discover the rationale behind the design choices.
For instance, building my own remake of TailwindCSS made me appreciate the unique quirks of Tailwind’s mobile-first approach to responsive styles. By having having mobile styles as the base and layering on styles for devices of increasing power, Tailwind encourages developers to make design decisions that help mobile devices take less processing time for media queries.
In addition, through struggling to scale my own framework with numerous css classes, I’ve discovered important discussions on conventions like BEM or SUIT. Furthermore, I’ve also learned about common solutions to widespread problems like clearfix for layouts built with floats that I wouldn’t have found otherwise. Without creating my own tools, I might not have stumbled upon such ideas.
Takeaways
Building your own framework can help you:
- Gain a greater appreciation for what they try to solve
- Discover new discussions of which you were previously unaware
- Broaden your understanding of the fundamentals
To conclude this post, I challenge you to build your own CSS framework, and I encourage you to share what you learned.
Well, that is if you use PurgeCSS, as described on the Tailwind docs ↩
Related posts
Must-reads
A Javascript Developer's Guide to Contributing to Firefox
Note that while I’ve done my best to make sure the content here is correct, there may be slight inaccuracies. At time of publishing, there isn’t much documentation on the inner workings of modules in Firefox, but I’m planning on sending in a patch to the official Firefox docs.
How I Got Started With Contributing to Firefox
I admit, I used to think contributing to Firefox was basically impossible, especially as someone who didn’t yet know Rust or C++. And even if I overcame this hurdle, I thought it was hard to get set up, difficult to find bugs that are well-scoped to what I can actually accomplish given my skillset, and challenging to understand the complex codebases that would be typical of large software projects. But I wanted to help. And after hacking Google Chrome, I realized that maybe I could, or at least I could try.
What I learned from hacking Google Chrome
I’m just a regular engineering student. I mean, sure, I like watching random educational youtube videos, using computers, and programming for fun, but I mean, hey, that’s why I’m in ECE. Yet, I’m not a hacker, nor do I have the skills to even remotely consider myself one. And even despite the plethora of reasons I should fail, I managed to do what I thought I could never do.
Midway Through the Years
Midway changed a lot from its humble beginnings as a simple prototype to the complex extension it is now. Let’s explore how it changed. Check out the latest version of the extension on the Chrome Web Store.