Atomic CSS thoughts

So I built this site quickly because I just wanted to get something out there.

It’s using Hugo, and a modified Ananke theme, which in turn uses the Tachyons CSS Toolkit. (EDIT: This blog is no longer on this theme.)

I didn’t go into this carefully weighing my options and choosing Tachyons, I just picked a minimal enough looking theme and stumbled on Tachyons by chance.

The markup ends up looking pretty crazy for what I’m used to:

<header class="w-100">
  <h1 class="f1 mb1">Atomic CSS thoughts</h1>
  <time class="f6 mb4 dib tracked" datetime="2018-11-28T22:03:21&#43;08:00">November 28, 2018</time>
  <span class="f6 mb4 dib tracked"> - 3 minutes read</span>
  <span class="f6 mb4 dib tracked"> - 430 words</span>
</header>

This approach uses a bunch of shorthand classnames so you can craft the page however you want and the idea is that you should never really have to edit the actual stylesheet.

Instead you do your best to learn the classnames it provides, and use them to compose your layout.

The stylesheet won’t ever grow as a result, and when doing code review you can immediately see what area of the page it will impact.

For example the bit underneath the title of this post, that shows the date and read length has the following classes applied to it:

.f6 {
    font-size: .875rem;
}
.mb4 {
    margin-bottom: 2rem;
}
.tracked {
    letter-spacing: .1em;
}
.dib {
    display: inline-block;
}

So if I wanted to make it a bit bigger, I could change the .f6 class to a .f5.

Or if I wanted some more margin-bottom, I’d change the .mb4 class to .mb6

But I’d have to remember that fonts get larger as the number gets smaller, while it’s the opposite for margin. That’s fine, I’m used to h1 being the larger heading. But then you have to remember what ‘dib’ means, and etc.

I don’t think it works well for this kind of “hand built” blog that I am making.

This blog is a bit of a place for me to tinker around with things, so I’ll probably create my own very minimal theme later on. (EDIT: This is done, you’re on the new theme now.)

However, yesterday at Talk.CSS, the local CSS meetup here in Singapore, Yishu made a case for generated atomic css in React using cxs. And there I think it does make sense, and I’ll give it a try when I have a chance.

The CSS you actually edit would be in the same jsx file as the component that it applies to, so for code review it is still clear what a change will impact. However what gets generated at the end of the day are atomic bits of css that can be reused to keep the stylesheet quite low weight.

Take a look at her talk here: https://www.youtube.com/watch?v=RE5_wTNSyDM

And cxs here: https://github.com/cxs-css/cxs