Elegant CSS: Pico CSS

Photo by Fabrizio Chiagano on Unsplash

When last I opined, dear reader, I was working to develop my own css files that met all the standards for elegant CSS: purely “semantic” (separating content from appearance) and free from classes, yet fulfilling all the basic UI needs.

Then I found Pico CSS — a CSS file I think even Jason Knight could love. Here are the top-6 reasons I love it:

1. Classless. It literally sets styles for each HTML5 semantic tag. In those few places where you might really need something HTML5 fails to provide (eg: Slide Switch) it assigns that to a “role.”
2. Custom Properties. Nearly every parameter I might want to change (widths, breakpoints, colors) is set by CSS3 Custom Property variables, all at the top of the file. You can either simply edit a copy for your own project, or you can link to the Pico.css CDN file and add a few CSS lines of your own to change the default parameters.
3. Clean Design. My favorite aspect of the principle of separating content from style is that it encourages good design. While you are still free to violate principles of good design with inline styles, for example, Pico CSS handles everything so cleanly out of the box you are less likely to do so.
4. Works out of the box. Not even Bootstrap ever seemed to give me a functional, classic, responsive website without adding extra CSS to handle things like drop-down menus and toggle switches. And it does it without a jungle of classes and meaningless DIVs.
5. No JavaScript. The wonderful dynamic things that CSS can now do that we used to use JavaScript to accomplish are now included.
6. Light weight. It is not tiny— certainly I’ve created much smaller CSS files that define a site — but at less than 10 kB minified and gzipped it certainly will not slow you down.

It’s too bad we aren’t free to recreate WordPress today, using this same approach — one page of parameter settings that completely defines the design of a site.