Hasty Treat - Tips For Writing Good CSS

Syntax - Tasty Web Development Treats

Wes Bos

Js, Technology, Css, Html5, Tech News, Webdevelopment, News, Javascript, Html

4.9 • 1.1K Ratings

🗓️ 18 November 2019

⏱️ 25 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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

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

Transcript

Click on a timestamp to play from that location

0:00.0	Monday, Monday, Monday,
0:02.0	Open wide Dev fans.
0:04.0	Get ready to stuff your face
0:06.0	with JavaScript, CSS, node modules, barbecue tips,
0:09.0	get workflows,
0:10.0	break dancing, soft skills, web development,
0:12.0	the hastiest, the craziest, the craziest development the hastiest the craziest the tastiest web development treats coming in hot here is
0:18.1	Wes Barracuda bars and Scott El Toroloko Tolinsky.
0:25.0	Oh, welcome to Staxin this Monday.
0:28.6	Hastie Treat, we're going to be talking all about tips for writing good CSS because we love CSS over here at syntax.
0:36.8	Too often there's this whole, you know, anti or pro CSS and everybody's too caught up in the pros and cons.
0:43.6	We just want to say that we love CSS and we want to talk a little bit about how to write
0:47.8	good CSS.
0:49.2	And if you want to write good, well, sorry, let me introduce you first.
0:53.0	My name is Scott Tolinsky. I'm a full stack developer from Denver, Colorado,
0:57.6	and I like to write CSS. With me as always is the West Boss.
1:02.0	Hey everybody, I'm excited to lay down some hot tips on writing good CSS.
1:08.0	Lay down those hot tips, Wes.
1:10.0	We're going to be talking all about some things that we like to keep in mind when we write our CSS.
1:15.0	Now this episode is, really has the perfect sponsor for this because this is a browser that's going to help you write really excellent CSS. we say this is a browser it's more or less like a
1:25.9	design tool that you can use to see your application across device sizes and I'm talking
1:31.4	about size at sizey.co that's S I Z Z Y
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.