Exploring CSS Frameworks and Pre-processors

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