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