comment heart repost

Owl logo Keith J. Grant

Social

There are definitely some interesting ways Grid meets up with our current modular styling best practices. You can fix that stretched button with align-self/justify-self properties, but do you really want to make it aware of its grid context like that?

I posted this a while back on how the old Separate Structure from Skin OOCSS rule needs some attention again: https://keithjgrant.com/posts/2017/12/oocss-and-grid/

That’s amazing. Particularly considering it’s less than a week old. In my experience, there’s typically a “Buffer delay” between when a popular post gets published and when it really takes off—because everyone tends to throw the links into their Buffer, which is usually backed up a couple weeks.

So I have a feeling you’re going to see that number really take off 💪🏻

I’ve been meaning to do some write-ups of all this. It all uses W3C standards, so there’s a lot of interop :)

There are a lot of little pieces. No one of them is too difficult, but piecing it all together in a way that provides a decent workflow took a little doing.

The key is getting webmention support setup. Then there’s a service called https://brid.gy to bridge webmentions in and out of twitter/facebook.

Nice! Subscribed!

Looks like you’re missing the <link rel="alternate"> for discoverability, though

I use bullet journal loosely for tracking what I'm working on. Not as super religious about it as I was when I started, but I still find its annotation symbols useful

I love a good sour. Definitely not keto, but my favorite is with real maple syrup instead of simple syrup 😍

For extra credit, this reply is posted to my site, too 😁

I haven't written anything up but feel free to hit me up with any questions as you go.

I did a very SMACSS-y folder organization. All modules in a src/modules directory & subdirs, src/base, directory, src/layouts, /src/mixins, etc.

In the src directory I have multiple top-level stylesheets (four for each brand, as I've chunked up the styles). I basically have my preprocessor crunch each of these and output each of them compiled in a build directory.

The CSS lives completely in its own repository. Published with semver & release notes. I kinda sorta wrote about my thoughts regarding that here: https://keithjgrant.com/posts/2015/08/css-first/

All right, I’m kidding myself. I’m not going to get to this today, at least not in full depth. But I do want to say this much: I hope you don’t take that subtweet of mine as criticism.

Just because some of your points don’t speak to me directly doesn’t mean they won’t speak to others. And I think that’s kind of the point with this CSS-in-JS stuff: the webdev world is broad. The projects we build vary wildly. The CSS-in-JS tools vary wildly. The technical needs of various teams vary wildly. What works for me won’t automatically work for you.

This is why we have Webpack AND Rollup AND Parcel AND out-of-the-box configurations like Next.js and create-react-app. There is no one size fits all. Nobody needs—absolutely needs—cij. It can all be done with a reasonable amount of discipline and vanilla CSS + a preprocessor. But cij can make life easier for some projects, and I think that’s the long and short of it.

Is it just me, or is React getting more demanding about adding keys to everything?

It’s complaining to me now about a perfectly normal <div><label /><input/><button/></div> structure not having keys 🙄

It needs to be as thin as a credit card, Jonathan! 🙃