There’s never enough time.

So we’ve covered a lot of ground, but of course, there is much, much more out there. I wanted to gather some things to talk (sadly, very briefly) about—and some links for you to look into on your own. These are some modern, web design/dev things you should probably know about.

Here’s a repo:

https://github.com/typography-and-interaction-too/other-stuff

A little list:

• CSS variables!

  • For colors, spacing, etc.—any value you use multiple times and want to be consistent, or want to easily change
  • Also much easier to work across breaks/queries, just specify what changes, not the properties
  • Scoping within DOM, fallbacks—facilitates modular design systems

• Advanced typography (aka: The Bounding Box)

  • Easier to position to the visible characters, *em-*based—take the bounding box out of the equation
  • Pseudo-elements and negative margins can negate the space, for optical alignment

• SASS/SCSS vs. CSS

  • Pre-processing for convenience, variables, hierarchy, style document management
  • Mixins for functions, extends for shared styles

• Combined vs. functional CSS

  • Big classes that do lots of things vs. small single-purpose classes
  • Naming conventions: BEM is still very common
  • Atomic/utility classes: Tailwinds taking over

Some links:

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

MDN goes deep.

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

A thorough look at web typography spacing.

Sass: Syntactically Awesome Style Sheets

A ubiquitous extension to CSS.

BEM Naming Cheat Sheet by 9elements

Naming stuff is hard, BEM can be helpful.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Atomic (utility class) CSS, on the other side.