css

A properly-written web page is readable sans CSS.

arachne

If you’re interested in seeing the unminified and commented stylesheets I use for this site, you can find them here.

Warning: might contain some idiosyncratic choices.

  • core: contains variables and styles shared across all page types
  • home: styles for the homepage
  • page: styles for “default” pages—project pages, journal pages
  • year: styles for the yearbook pages; see 2024

Note: Some pages have inline <style> for page-specific styling.

alternate styles

It’s possible to have alternate stylesheets in a webpage:

<link rel="stylesheet" href="main.css" title="default">
<link rel="alternate stylesheet" href="alt.css" title="alternate">

selectors

Selector for external links:

a[href^="http"]

feature queries

You can use @supports to conditionally apply rules and integrate features based on browser support.

@supports (grid-template-rows: masonry){
  .gallery { grid-template: masonry / 5fr 5fr }
}

media queries

This isn’t definitive and certain scenarios may call for more specific screen size values but generally this is what I go with:

/* mobile */

@media screen and (min-width: 30em) {
  /* tablet */
}

@media screen and (min-width: 60em) {
  /* desktop */
}

There are also queries for media features to check if the browser prefers reduced motion, if interaction is via touch or cursor, if orientation is landscape or portrait, etc. I created a tool in the lab so you can check what your browser is set to.

@media (hover: hover) and (pointer: fine) {
  /* if browser uses cursors instead of touchscreen for interaction */
}

@media (prefers-color-scheme:dark) {
  /* dark mode styles */
}

fancy footnotes

You can use the symbols() function to override counter styles in lists. I use this to make fancy footnotes.

ol#footnotes {
  list-style: symbols(symbolic "*" "†" "‡" "§" "‖" "¶");
}
  1. a footnote
  2. another footnote
  3. three footnotes
  4. four feetnotes
  5. five feetnoteses
  6. six feetnoti
  7. seven feetnote

minifier

I use lightningcss for minification.

pnpm i -g lightningcss
lightningcss -m in.css -o out.css

frameworks

I hate frameworks in general. They tend to be unnecessary, introduce unnecessary learning curves to the glorious simplicity of vanilla CSS, and more often than not, they’re unnecessarily constrained, making it a hurdle, if not impossible, to fully customise. But if I must recommend some frameworks, these are the ones I consider good*:

resources