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