The Day I Built a Spice Rack

Miko, remember when I talked about stripping away all those handy libraries?

…Alpine.js and Tailwind, nya. The story about ditching pre-mixed seasoning and cooking with basic ingredients, nya.

You remembered!? (>=<)

…So what happened after that, nya.

…Actually, it was really tough (>_<)

Tailwind was super convenient, y’know. Just line up class names and colors, spacing, font sizes all just… worked

…That’s the same as pre-mixed seasoning, nya. Just add it and the flavor is set, nya.

Right right! But when I stripped it all away and went with plain CSS…

…

Everything went all over the place

…What do you mean, nya.

Buttons were round on one page, square on another. Headings were big here but small there. Colors were slightly off everywhere

…In cooking terms, that’s a kitchen with no seasoning standards, nya.

Huh?

When you had pre-mixed seasoning, “just add this and the flavor is set,” nya. But without it, every single time you gotta decide “how much salt?” “how much soy sauce?” on your own, nya.

Yeah… that’s exactly what happened. Every time I was like “is this the right color?” “is this enough spacing?”

…No standards means the flavor drifts every time you cook, nya.

So I realized. Everything Tailwind used to decide for me, I had to decide myself now

…Obviously, nya. Using pre-mixed seasoning without knowing what’s inside was the problem, nya.

Ow, that’s harsh but true… (>_<)

…When Miko organizes a kitchen, the first thing is to set up the spice rack, nya.

Spice rack?

Salt, sugar, soy sauce, miso. Label everything and put them in fixed spots, nya. That way, anyone cooking can use the same ingredients in the same amounts, nya.

…! (>=<)

That’s it! I just gotta build a “spice rack” in CSS!

…Just now figuring that out, nya?

In CSS, a spice rack is called design tokens. Colors, font sizes, spacing… you give names to all the basic values used across the whole site and put them all in one place

…Labeling and putting things in fixed spots. Same thing, nya.

Exactly! Like…

“This gold is --color-brand” “Heading font size is --font-size-lg” “Button border radius is --radius-md”

You define everything upfront

…I see, nya. Same as writing “1 tablespoon soy sauce” in a recipe. Not “to taste,” but exact amounts, nya.

But y’know, actually building that spice rack…

…

It was SO hard (>_<)

…How so, nya.

First, colors. I had to go through every color on the site and sort them out one by one. “Where is this color used?” “Are these two colors too similar?”

…

Then font sizes. Not just big-medium-small, but for each heading level, “this one is this many pixels, line height is this…”

…In spice rack terms, that’s the “miso comes in different types” problem, nya. Red miso, white miso, blended miso. All “miso” but each has its own use, nya.

Exactly! Colors alone had dozens of varieties, and just naming them was a struggle…

…But once you build the rack, everything after that is easy, nya?

…Yeah! That’s totally true!

And hey hey, I made some cool discoveries along the way! (>=<)

…What, nya.

Modern CSS has gotten really, REALLY powerful

…CSS is the language that decides how things look, nya?

Yep! And back in the day, you needed this extension tool called Sass to get by. CSS didn’t have variables, calculations, or nesting on its own

…Extension tool, nya?

In cooking terms, it’s like using a food processor because one knife isn’t enough

…Miko doesn’t use food processors, nya.

Haha, classic Miko. But here’s the thing, today’s CSS can do food processor-level work with just a knife

…Specifically what can it do, nya.

For example, there’s this feature called @layer. It lets you decide the priority order of your CSS yourself

…Priority order.

When multiple styles hit the same element in CSS, they fight over “who wins.” Managing those fights used to be a total nightmare…

…In cooking terms, that’s the order of seasoning, nya. Base flavor, broth, finishing touch. If you don’t add them in order, the flavors clash, nya.

Yes! (>=<) @layer is exactly that! “First the base, then components, then utilities.” You can declare the seasoning order

…That’s like writing recipe steps, nya. When the steps are set, anyone can make it taste the same, nya.

So in the end, Miko. I realized something really important

…What, nya.

With or without Tailwind, you gotta decide the design consistency yourself

…

Tailwind was handy pre-mixed seasoning, but which flavors go where and how to use them… I still had to figure that out on my own

…Meaning even with pre-mixed seasoning, “this dish needs this flavor” is still your call, nya.

Exactly! No matter what tools you use, “what flavor should the whole site have” is something only you can decide

…Obviously, nya.

I mean, it’s obvious to you, Miko… but it took me quite a struggle to figure that out (>_<)

…Beginner cooks can’t get the flavor right without pre-mixed seasoning, nya. But with experience, you learn to create your own flavor with just salt, soy sauce, and miso, nya.

…!

Netsuki, you can now create your own flavor, nya. That’s growth, nya.

Miko… (>_<)

…Not a compliment, nya. Just stating facts, nya.

Right now, the site has a design catalog page

…Catalog, nya?

These are the colors, this is the button shape, these are the spacing sizes… all collected in one page. Basically your “spice rack” turned into reality

…

Building it was tough, but now when I make a new page, things just click into place. Like grabbing spices off the rack

…Same as Miko’s kitchen, nya.

Hehe, I learned from your kitchen~! (>=<)

…One thing bugs me though, nya.

What?

…You ditched the “pre-mixed seasoning” because it wasn’t convenient anymore when working with AI, nya?

Yeah

…But now you built your own “spice rack.” That’s basically making your own pre-mixed seasoning, nya.

…

…Oh

You threw away the store-bought stuff and made it homemade, nya. Your own blend where you know every single ingredient, nya.

Miko, that’s it…! (>=<)

Store-bought pre-mixed seasoning was unsettling because I didn’t know what was inside

But homemade? I know exactly what’s in it

So I can use it with confidence, and if I wanna change the flavor, I can adjust it right away

…Same as Miko’s umeboshi, nya.

Huh?

…Store-bought umeboshi is too sweet to eat, nya. So Miko pickles her own every year. Just salt and plums. Simple, nya.

…Miko’s version of peperoncino

…Don’t compare umeboshi to peperoncino, nya.

But both are about not adding anything extra, making it yourself, with your own hands, to your own taste, right?

…

…Well, maybe so, nya.