In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.
Sizzy - SponsorSizzy is a browser built specifically for designers and developers. It allows you to see your website or application at a glance across all sorts of different devices and orientations. It keeps everything in sync, and even includes Chrome’s dev tools. Stop wasting time and speed up your workflow at Sizzy.co.
Show Notes4: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 good9:07 - Nail down typography early
You can always revisit if it isn’t what you need10:36 - Pick a pattern and stick to it
BEM Functional CSS CSS in JS14: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 Links Stylus Webpack Parcel Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets