Hasty Treat - Tips For Writing Good CSS

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

Sizzy - Sponsor

Sizzy 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 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 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