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...
Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.
Show Notes
In this episode of Syntax, Scott and Wes talk about writing good CSS.
LogRocket - SponsorLogRocket 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 - SponsorNetlify 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 Notes02: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
19:42 - Tools
- PostCSS is like Babel for CSS. Some good 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
41:17 - Writing maintainable CSS / scoping solutions
- Component-based
- CSS Modules
- Naming Convention Based
- CSS Variables
- Powerful when utilized with things like calc() to avoid out of sync values
- Know which browsers you need to support
- Syntax 197: Hasty Treat - Tips For Writing Good CSS
- Compass
- Susy
- Grunt
- Gulp
- Linaria
- Astroturf
- Houdini
- Svelte
- Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/
- Scott: Rustlings
- Wes: Class Action Park Documentary
- 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!
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets