As my own little corner of the web uncermoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.
After ten years, it’s time to stop tearing open seed packets and carelessly throwing seeds around. It’s time to get out a trowel (or whatever people use for gardening) and organize the components I’ve built for this garden into a style guide. It isn’t an elaborate design system like the fancy ones on styleguides.io, but it’s mine and I am getting a lot of use out of it all the same.
Not only has it helped collate all of the components I’ve built for individual blog posts in the past, it’s a great way to test larger CSS changes I make to my site. In a way, it provides a worry-reducing comfort much in the same way that unit testing does, albeit less automated.
There are a few cool things in there:
- Shows the different stages in web font loading and how they each render.
- Tests for hyphenation and ligatures on web fonts.
text-decoration-skip-ink: autoon links (to avoid overlap between descenders and link underlines) with feature tested fallback to a gradient approach.
- Fluid (and breakout full width) images, videos (including third party players) using only CSS.
- Inline resizable demos.
Having a style guide, in my mind, has little to do with the size, scope, or scale of your web site. Style guides are about code consistency and—more importantly—code longevity.
Say you took a client and they said “design me a website that will look great with no changes in 10 years”. You would ______
— Chris Coyier (@chriscoyier) July 27, 2017
Software will always require changes, but speaking from someone who has maintained a web site for ten years running I’m happy to have a style guide to assist with any future changes I make. If your web site is in it for the long haul (and why wouldn’t that be your goal?), I highly encourage you to make a style guide of your own!