BROADCASTS.com

Published: Aug. 23, 2021, 1 p.m.

In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at\xa0prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It\u2019s an exception tracker, a session re-player and a performance monitor. Get 14 days free at\xa0logrocket.com/syntax.

Show Notes

03:20 - Layout is hard

• block\xa0vs\xa0inline\xa0vs\xa0inline-block
  • Learn what this means!
• Flexbox
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Grid
• Avoid floats
• Wes\u2019 Flexbox Course
• Wes\u2019 CSS Grid Course
• Scott\u2019s Modern CSS Layouts Course

07:43 - I can\u2019t get my thing to get the right style

• Use a scoping system like BEM, CSS in JS, CSS Modules
• Don\u2019t style via IDs
• Avoid\xa0!important

11:00 - My thing isn\u2019t looking the way it\u2019s coded

• Dev tools
• Write CSS in the browser
• Check class names

12:11 - I don\u2019t know if I can delete this CSS

• Use tools like\xa0https://purgecss.com/
• http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

15:51 - Look at things holistically

Tweet us your tasty treats!

• Scott\u2019s Instagram
• LevelUpTutorials Instagram
• Wes\u2019 Instagram
• Wes\u2019 Twitter
• Wes\u2019 Facebook
• Scott\u2019s Twitter
• Make sure to include\xa0@SyntaxFM\xa0in your tweets