Skip to main content

CSS

Auditing

Grid

Layout

Utility-First CSS

  • Why?
    • Overall, MUCH FASTER than any other approach
    • Less repetition since each possible css declaration is written once and then reused = faster
    • On each new project, you write less and less css since all old utilities can be reused = faster, fewer chances for errors
    • No context switching (since all HTML and css info is in one place) = faster, less mental fatigue
    • Prototyping is FAST and the classes do NOT need to be removed later
    • Repeated groups of class names can be grouped with @apply to avoid repeating class clusters
    • Equal specificity = the classes you add always work
    • Less typing = faster, fewer errors
    • When you come back later and want to tweak something, you can see and make all your changes in one place (instead of hunting through other files to figure out what css is applied, what the HTML elements are, etc)
  • Why a good fit for React (and other component-based JS frameworks):
    • React’s component-based model means you are already thinking in terms of small, reusable building blocks
    • utility-first css classes are basically CSS building blocks
    • functional (each class is basically a well-named function that gives you exactly what you think it will; small enough to be maximally reusable and non-conflicting)
    • component-based
    • the concern over verbose className attributes is solved by the fact that they are only listed in one place (the component)
    • reusability can also be achieved with Tailwinds’ @apply directive
    • benefits: you don’t have to write CSS, you just use CSS that’s already been written; you don’t have to switch between files to see the relationship between the semantics and styling, which helps you reason about your UI and how to tweak it much more quickly and easily and without the concentration fatigue that builds up with context-switching; rapid prototyping and iteration is possible because you are applying classes 1 second after creating the markup and can make visual changes as quickly as you can think of them - much faster than moving elsewhere in the file (or switching) files to update a CSS declaration; faster styling by typing fewer characters (e.g. ‘bg-blue’ instead of ‘background-colour: blue’), makes a huge difference over time to type fewer characters in a closer location
    • Tools: Tachyons, Tailwind CSS, Custom with Tailwinds as generator
    • Further reading: @mrmrs original post, Simon Swiss’ 4-part Tachyons blog series, Egghead course and recent presentations
  • Concept:
  • Tailwind CSS:
  • Other libraries:

Media Queries (beyond just width)

Container Queries

Logical Properties

Styling Scrollbars

Fonts

  • Modern Font Stacks • System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders. 📚

Design systems

Scroll-driven animations

Other syntax

Accessibility

How to make text readable

  • Bump up base font size on large screens
  • Use line height
  • Use max width (in characters)

What Input?

  • tracks your user’s input mode and records it in data attributes added to the window
  • to hide outlines except for keyboard users, you just need one CSS declaration:
[data-whatintent='mouse'] *:focus,
[data-whatintent='touch'] *:focus,
html:not([data-whatinput='keyboard']) *:focus {
  outline: none;
}

Links:

  • what-input • A global utility for tracking the current input method (mouse, keyboard or touch) 🛠️

Icons

  • Flaticons • Free vector icons and stickers in PNG, SVG, EPS, PSD and CSS 🛠️

Forms

Inbox