Written by
Ardit Xhaferi

Share this post!


← ../

Introducing PicoCSS: The Minimalistic Micro-CSS Framework

September 18, 20235 min read

Link to the project

Hello there, fellow developers! Today, I want to introduce you to an experiment of sorts—a micro-CSS framework I've been tinkering with. It's called PicoCSS, and while it might raise an eyebrow or two, it's a bit of an acquired taste.

The Quest for Minimalism

We've all been down the CSS rabbit hole, right? It's a world where a simple "flex" declaration can feel a bit too long. Enter PicoCSS, a framework that asks, "What if we made CSS classes even shorter?"

In PicoCSS, you write:


instead in Tailwind you would write


It's quirky, a tad challenging, and a little hard to master. But, if you can wrap your head around it, it could potentially save you some keystrokes.

Getting Started with PicoCSS

Let's dive right into the action and get you started with PicoCSS. It's so simple you might start questioning why you never thought of it before! (maybe cuz it's a dumb idea)

1. Installation

You can include the style directly in the header tag.

<link rel="stylesheet" href="https://pico-css-succ.vercel.app/main.min.css"/>

2. Applying PicoCSS Classes

Now comes the fun part. Instead of writing long class names like flex, you can use their abbreviated PicoCSS counterparts. Here's a quick cheat sheet to get you started:

  • `f` for `flex`
  • `m` for `margin`
  • `p` for `padding`
  • `bg` for `background-color`
  • `w` for `width`
  • `h` for `height`

And the list goes on! You'll find a comprehensive list of abbreviations in the PicoCSS documentation.

<!-- Tailwind CSS -->
<div class="flex p-4 uppercase font-extrabold">
  Hello, World!

<!-- PicoCSS -->
<div class="f p4 ttu fw8">
  Hello, World!

Benefits of PicoCSS

Now that you're knee-deep in PicoCSS, let's talk about why you might—or might not—want to use it.

1. Speedy Development

With PicoCSS, you save a few keystrokes here and there. Is it a game-changer? Well, it depends on your perspective.

2. Learning Curve

Let's not kid ourselves; PicoCSS comes with a learning curve. But after that typing fewer characters means less room for typos and faster coding. Stick with it, and soon you'll be crafting sleek and efficient code like a pro.


PicoCSS might be unconventional, and it might take a little getting used to, but the benefits of minimalism in web development are undeniable. It's a tool that empowers you to write cleaner, more concise code while maintaining the flexibility and power of CSS.

It's a small experiment in the grand scheme of things, and its benefits might be a tad overhyped. Give it a whirl if you're curious, but remember, there's no silver bullet in web development.

Stay curious, stay humble, and happy coding! 🤓🚀

If you want to explore PicoCSS further, go ahead. But also, don't be surprised if you find yourself returning to the good old CSS. Sometimes, simplicity isn't about shortcuts; it's about clarity and maintainability.

Published September 18, 2023, by Ardit Xhaferi.

You don't have to share this post, but if you feel like it: