DEV Community

Syntax - Tasty Web Development Treats

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

13:37 - Preprocessors

19:42 - Tools

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
Links Syntax Highlight ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!

Episode source