Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

https://syntax.fm

subscribe
share






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


fyyd: Podcast Search Engine
share








 September 16, 2020  56m