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