A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 197: Hasty Treat - Tips For Writing Good CSS

0:00

LOUDNESS

Nov 18th, 2019

Hasty Treat - Tips For Writing Good CSS

👇 Download Show✏️ Edit Show Notes

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.

Sizzy - Sponsor

Sizzy is the browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Check it out at Sizzy.co.

Show Notes

4:08 - Use a system

4:50 - Use overrides and cascading

  • Embrace the cascade
  • Don't rewrite the same CSS over and over again
  • Understand why scoping is good

9:07 - Nail down typography early

  • You can always revisit if it isn't what you need

10:36 - Pick a pattern and stick to it

  • BEM
  • Functional CSS
  • CSS in JS

14:39 - Don't style based on element type (kind of) — a class should describe the component

17:09 - Good naming techniques

  • Describe what it is, not what it looks like
  • Thing
    • ThingChild
      • ThingChild-modifier
  • Scale sizes (e.g. s, m, l, xl)

21:43 - Other tips

  • Group like CSS together
  • Chunk into different files
  • Write good comments
  • CSS properties FTW

Tweet us your tasty treats!