Have you ever seen a new product come out that you thought of years ago but were too lazy to build it? Today is that day for me 😅
CSS has become a vast subject over the last decade. The space has evolved so much it's almost unrecognizable. Eventually, everything old becomes new again. We do things because "we can" without asking if we should. Things that used to be gospel are now blasphemy. ( I'm looking at you "separation of concerns" )
However, the older I get the more I yearn for simplicity. A back-to-basics approach. Trim the fat, reduce the dependencies, and make it scalable. Today I think I've found a CSS library that takes a big step in that direction.
Today I want to give a shout-out to my new favorite minimalist CSS library. Pico CSS! 🎊 A Minimal CSS Framework for semantic HTML
A minimalist CSS library that uses native HTML selectors instead of classes or IDs as the foundation for base styles. Think Bootstrap without "specificity hell".
The installation process is super easy. Just a quick NPM install or a CDN link. ( Suck on that PostCSS! ) It comes with components and base layouts out of the box and is totally extendable with normal CSS rules if you so choose. Even modals can be easily configured by setting the "open" attribute with some JavaScript code. Tooltips become a breeze with native data-attribute selectors.
This is all standard and expected nowadays. We're not even to the good stuff yet!
Accessibility support is not only encouraged but expected. If you review their documentation you'll see lots of "aria-*" attributes. They actually use these to style some elements! I personally can't think of an easier way to keep UX in mind when writing HTML or styles.
The next thing that must be called out is the absolutely microscopic bundle size of this library. The classless version of Pico currently comes in at 9.43KB and the version with classes is 10kb. Compare that with the compressed gzip size of Bootstrap CSS at 29.8kb and you can see why they market themselves as a "reset CSS on steroids".
Now I will say the simplicity of this library does come with its own tradeoffs. For example, advanced layouts with grids are not included out of the box. The team adds a great paragraph to summarize the thought process behind this decision.
Overall, I think this project shows so much potential for things like prototypes, start-ups, and even freelance developers just trying to blast through a few projects. Scaling on top of Pico is more of an open-world adventure where you can do pretty much whatever you want. I personally love the semantic HTML approach they've taken here and the reduced cognitive load that it brings when writing code. I bet it might even make us better developers since we're being forced to use semantic markup.
I'll definitely be keeping an eye on this library! You can check it out the official Pico website.