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
Links Syntax 197: Hasty Treat - Tips For Writing Good CSS

Compass

Susy

Grunt

Gulp

Linaria

Astroturf

Houdini

Svelte

Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/

××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings

Wes: Class Action Park Documentary

Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%!
Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram

LevelUpTutorials Instagram

Wes’ Instagram

Wes’ Twitter

Wes’ Facebook

Scott’s Twitter

Make sure to include @SyntaxFM in your tweets