Coding CSS for Context

Snook on naming a class:

Here's what's important:

  • We want to identify that this is a variation on our button.
  • We want to indicate the purpose of this button style.
  • We want to avoid tying the code to a particular context that could change.

CSS Rooster

A Bot that Writes CSS Classes for HTML with Deep Learning

I played with it for a bit to see if I could get it to do anything impressively analytic. I took some semantic HTML and removed all the class names from it with the RegEx class="[a-zA-Z0-9:;\.\s\(\)\-\,]*". I dropped the class-free HTML into the Rooster, and it did generate new classes:

But the new classes seemed entirely based on what the tag is. <ul class="list">, <a class="link"> and such. That was without feeding it any CSS at all though. After I dropped in my whole stylesheet in a style block, I think I confused it. I got some new weird classes that weren't in my styles and stuff like <br class="desc" />. Oh well, it's just a fun experiment I think. Naming is hard, but we should probably still be doing it for ourselves.

Managing Typography on Large Apps

Harry Roberts suggest very minimal styles for h1-h6, then using heading-specific class names to actually style them, regardless of what element they turn out to be.

I could get behind that. In the past I've done .h1, .h2, etc rather than use the tag selectors, but heck, you might as well just give them names.