BROADCASTS.com

b'

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