Skip to content

Instantly share code, notes, and snippets.

@helenvholmes

helenvholmes/tenets.md

Last active January 20, 2021 22:17
Show Gist options
  • Save helenvholmes/6d366dfc9ce1736342f1199715572a32 to your computer and use it in GitHub Desktop.
Save helenvholmes/6d366dfc9ce1736342f1199715572a32 to your computer and use it in GitHub Desktop.
Download ZIP
FED Monthly, January 2021: CSS Can Be Cool And Not Awful I Swear
Raw
tenets.md

Responsive Design

Basic Tenets

  1. Browsers are natively responsive and mobile-first.
  2. Layout should be effective at every size.
  3. Visibility, font sizes, and spacing, etc. should be effective at every size.

Writing Responsive CSS

  • Use responsive units.
  • Write styles mobile-first.
  • Use flexbox and CSS grid to make the browser do math for you.

Writing Good CSS

  • Use DRY programming principles with CSS variables, calc() functions, and mixins.
  • Encapsulate styles with a naming convention such as BEM.

How do you migrate existing CSS to use these principals?

  • Identify reuseable components. (Can you map them 1:1 to your React components?)
  • Encapsulate their styles using BEM.
  • Sit style partials alongside the component they style using webpack or SCSS partials so you know what CSS belongs with what component.
  • Remove extraneous styles from affecting your newly encapsulated component.
  • Set up a linter to keep syntax and code style consistent.
  • Identify variables and make your CSS DRY. (Space, family stacks, colors, breakpoints, and font weights: all good candidates for variables.)

How does Design System fit into all of this?

  • We identify reuseable UI components
  • We encapsulate their styles using BEM
  • We sit style partials alongside the component they style using partials so we know which styles belong with which component
  • We use a linter to keep syntax and code style consistent here
  • We identify variables to make our CSS Dry:

CSS-Modules, PostCSS, and Sass, Oh My: Why so many things

  • "We sit style partials alongside the component they style using partials so we know which styles belong with which component"

This can get pretty complex if you're building a UI library: css modules are a sophiticated way of preventing style conflicts

  • "Use DRY programming principles with CSS variables, calc() functions, and mixins"

PostCSS marries new-spec CSS goodness (native CSS variables, the calc() function, and whatever else hits the spec in the future) with the stuff we love from Sass, like mixins and nesting. (How dirty was my style.css file because I couldn't nest?)

Good Articles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment