DEV Community

Syntax - Tasty Web Development Treats

Hasty Treat - CSS Frameworks

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

2:52 - What is a CSS framework?

  • Pre-written CSS that takes over the basic styling of your app
  • Can include just utilities or lots of styles (minimal to overboard)
  • Twitter Bootstrap and Zurb Foundation were the pioneers
  • Follow different CSS styles from “functional CSS” to utility-first to BEM

7:33 - Functional (aka Utility) based

  • Tachyons
  • Tailwind

9:59 - Preprocessor based

  • Bootstrap

11:33 - Styled Components based

  • Rebass
  • Styled Systems
  • Facepaint

15:50 - Why use one?

  • Makes styling FAST
  • Makes hard things easy
  • Some, like Bootstrap, have themes
  • Keeps your own CSS minimal and organized
  • Built on an established system
  • Lots of people use the same CSS

19:22 - Why not use one?

  • CSS class hell
  • Stops you from learning how CSS works
  • Size (not all have this problem)
  • Brotli, Purify CSS
  • You will be overriding a ton of it
  • You like exclusively writing the code you need and nothing else
Links Tweet us your tasty treats!

Episode source