Syntax - Tasty Web Development Treats

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

Podden och tillhörande omslagsbild på den här sidan tillhör Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers. Innehållet i podden är skapat av Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers och inte av, eller tillsammans med, Poddtoppen.

Populärt på poddtoppen just nu