In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.
Sizzy - Sponsor Sizzy - 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. 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