Writing Good CSS

In this episode of Syntax, Scott and Wes talk about writing good CSS.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

Show Notes

02:11 - Frameworks

Utility: Tailwind, Taycons, Bulma
Frameworks: Foundation, Bootstrap
Classless base starters: https://github.com/dbohdan/classless-css
- HTML5 UP / A template

13:37 - Preprocessors

Sass
Stylus
Less
Regular CSS
- Variables
- Color functions - not yet

19:42 - Tools

PostCSS is like Babel for CSS. Some good plugins:
- https://github.com/postcss/postcss#plugins
CSS min/max for clamp
Autoprefixer
Autoreset - reset a component
Gap instead of grid-gap
Simple-vars
Postcss-modules
SugarSS
Preset env

34:19 - Stylint

Stylint
More than just a basic linter
Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable

36:37 - Removing unwanted CSS

PurgeCSS - Tailwind uses this
PurifyCSS

41:17 - Writing maintainable CSS / scoping solutions

Component-based
- CSS Modules
Naming Convention Based
- BEM
- SMACSS
CSS Variables
- Powerful when utilized with things like calc() to avoid out of sync values
Know which browsers you need to support