this post contains a list of things i want to do with this blog

In mak­ing a tiny blog, I wanted to force my­self to write more; I like writ­ing, and I en­joy the act of mak­ing sto­ries, but I found that when­ever I took a break from writ­ing for even a lit­tle bit, I’d regress heav­ily. By mak­ing a blog, and thus, by forc­ing my­self to write more, even when it’s not about sto­ries, I would try to make sure my writ­ing else­where stayed sharp.

You will no­tice that there’s nearly a month-long gap of posts in this blog al­ready. You will also no­tice that, in­stead of a tra­di­tional writ­ing post, all I did to stop that dry spell was post­ing this SCSS func­tion, which is a kind of writ­ing, but not, like, prose. This is be­cause, in de­cid­ing I needed to make a tiny blog, I pro­ceeded to re-re­mem­ber all the CSS I had for­got­ten over the years… which, uh, made me re­al­ize just how much CSS is dif­fer­ent from when I was a decade younger.

I went right to SASS, in mak­ing this blog, be­cause I as­sumed that since I had­n’t heard much about CSS in re­cent years that there’d ba­si­cally be no new de­vel­op­ments, as op­posed to look­ing up a ran­dom func­tion I wanted, and then learn­ing that, ac­tu­ally, nearly every­thing I’d want SASS for and more is in CSS now. Not just be­ing able to nest se­lec­tors, which is the most pleas­ant sur­prise, ^{[1] Link to foot­note 1} but shit like color mix­ing and mod­ern se­lec­tors that ba­si­cally lets you do what most mix­ins are for any­ways and… lay­ers!? Wait, they just let you do that your­self now? I saw a guide to @layer, in par­tic­u­lar, and it re­minded me of just why I used to tin­ker so much with us­ing CSS when I was a kid. In a world where cod­ing a thing meant that you had to com­pile, and re­com­pile, and re-re­com­pile, web de­vel­op­ment was some­thing where I could mess with it and in­stantly get an out­put show­ing what I did.

This has, gen­uinely, lit up the fire I had as a teenager, when I re­ally wanted to get into web­dev as a ca­reer, ^{[2] Link to foot­note 2} and now I have spent far too much time than is healthy re­trac­ing all my steps from back then.

Thus, the todo list. Here we go:

ditch scss en­tirely

On pa­per, the only thing I’ll truly miss from SCSS is com­ments not feel­ing like shit to put in. If you don’t know, CSS com­ments are like this:

/* Man this is, like, the most annoying combination of keystrokes */

And SCSS com­ments are like this:

// Oh thank god something that'll make me want to put in comments

I want you to type in two slashes, into what­ever text field is clos­est to you, and then com­pare that with typ­ing in /* this nonsense */. One of these is, very ob­vi­ously, sig­nif­i­cantly less an­noy­ing to do. This is­n’t a small prob­lem, in my opin­ion; if there’s one thing I’m learn­ing very quickly, it’s that your CSS be­ing leg­i­ble is a thou­sand times more im­por­tant than any­thing else, and that starts with writ­ing com­ments, which, there­fore, starts with ac­tu­ally want­ing to write in the com­ments. I get why it’s not some­thing you can plug in willy-nilly; CSS is­n’t ac­tu­ally a multi-line syn­tax, so just two slashes would­n’t ac­tu­ally be parsable, whereas SCSS can just spit out dou­ble-slashes into more CSS-friendly for­mats–but like, man, could you at least let me re­place the as­ter­isks with a sec­ond slash, or some­thing? Having to make my right hand do ac­ro­bat­ics every time I want to ex­plain what a cus­tom prop­erty does is an­noy­ing, dude.

…Ahem. Regardless, every­thing else I’d want in SCSS is ei­ther cov­ered by new CSS good­ies, or it’s cov­ered by me throw­ing shit at LightningCSS and see­ing what sticks. Sass, as a con­cept, feels like some­thing that’s be­com­ing down­right waste­ful over time, and if I want to ac­tu­ally get up to speed, I’ll start by see­ing how lit­tle of it I ac­tu­ally re­quire. I’m sure there’s a so­lu­tion to hav­ing rel­a­tively sane com­ments that won’t re­quire me to do any­thing too es­o­teric, es­pe­cially since I’m us­ing a post­proces­sor that could the­o­ret­i­cally just han­dle it.

learn how lay­ers work

As a start­ing point, it seems not in­sanely hard to wrap my head around? So like, you put some stuff at the top like

@layer lowprio, midprio, highprio;

and then you call it like

@layer highprio {
    p {
        color: purple;
    }
}

@layer midprio {
    p {
        /* this bit stays */
        font-size: 1.125em;
        /* this bit doesn't */
        color: green;
    }
}

@layer lowprio {
    p {
        /* neither of these stay */
        font-size: 1rem;
        color: red;
    }
}

and then the para­graph would be purple and not green or red, and it’d be sized at 1.125em and not 1em, be­cause purple and 1.125rem would both be the higher pri­or­ity thing. While fuck­ing around, I no­ticed that you can also do the op­po­site, so you can nest the @layer lowprio in the p in­stead. I imag­ine, since un­lay­ered stuff takes pri­or­ity, you could have, like, a re­verse-!important, ^{[3] Link to foot­note 3} where you need to make 100% sure that some­thing only comes up if noth­ing else is al­ready there:

That all tracks, what I think is go­ing to take a bit with it is­n’t that, it’s moreso that CSS, up un­til this point, has al­ways been about un­learn­ing all the ways I’d want to or­ga­nize every­thing. I might want some stuff that I mess with to ap­pear closer to the top of the text ed­i­tor, but that might break every­thing in two with­out me notic­ing! I’ve gotta throw around !important mod­i­fiers or else I might move a sin­gle se­lec­tor and in­stantly shat­ter my en­tire web page!

It’s go­ing to take a bit be­cause this feels too com­fort­able, and that means I’m go­ing to keep think­ing it feels wrong for a while, un­til it does­n’t. Completely pulling this out of my ass, but if I were to haz­ard a guess, I’d prob­a­bly want some­thing on this blog that’s like

@layer reset, base, overlay, fakemixins;
@import url(reset.css) layer(reset);

@layer overlay {
    /* all my spending-three-hours-styling-one-frontpage-tag stuff */
}

@layer base {
    /* all my touched-this-once-three-weeks-ago-and-never-again stuff */
}

and that would prob­a­bly do well enough for now. Speaking of that last layer…

try out some freak mod­u­lar­ity shit for clamp­ing

The lit­tle I still make use of a sass pre­proces­sor for, on pa­per, is stuff you could just throw into cus­tom prop­er­ties. Probably the eas­i­est ex­am­ple of me be­ing kinda lazy is in the <hr> ad­ja­cents I use; I hate deal­ing with in­lined SVGs in CSS, so in­stead I have an ex­tremely un­nec­es­sary func­tion that ex­ists ex­clu­sively so I can throw in the raw HTML, and have it spit out base64-friendly code later.

…I’m not even sure why I don’t just in­line it in the HTML in the first place, re­ally. I guess I’m just so used to in­lin­ing that stuff that I never thought about it.

As I’ve shown on this blog, the way I do fluid type in SCSS will never work in pure CSS, de­spite MDN im­ply­ing oth­er­wise, but that also is­n’t the only way to do fluid type. I al­ready linked it be­fore when point­ing out that you ba­si­cally al­ready have what most mix­ins are for, but for pos­ter­ity, that site se­lects, in one block, every­thing that needs fluid type at­tached to it, all around a --font-size cus­tom prop­erty, and then you just cus­tomize each el­e­ment like

h1 {
    --font-size: var(--font-size-1);
}
h2 {
    --font-size: var(--font-size-2);
}
h3 {
    --font-size: var(--font-size-3);
}

so that each one is build­ing a calc off a dif­fer­ent num­ber. Seems a thou­sand times less com­pli­cated than what I’m do­ing to get sim­i­lar out­put, if any­thing.

This is a list of ideas I have right now, any­ways. I may try to set up some front­page sit­u­a­tion that shows what I have and haven’t done; it’ll feel nice to check it off, es­pe­cially in the one place I have to go to every time I test stuff lo­cally. I dunno! This is the fist time in a re­ally long time that some­thing’s been kind of ex­cit­ing for me to mess with, so I can’t say. If noth­ing else, it’ll make for a fun learn­ing ex­pe­ri­ence to mess around in, even if the end re­sult kind of sucks ass.