Let's face it. All websites need CSS and yours is probably awful. There's too much of it. There's a bunch of duplication. It's like a delicately spun spider web, tightly coupled and fragile. It has more patches than a bicycle wheel. Socrates and Rouan are going to show you that it doesn't need to be this way. They're going to show you some common CSS code smells and share some CSS coding tips. They're going to introduce you to the concept of component-based styling and show you how to curate a kick-ass style guide. Somewhere along the way, Rouan may even convince Socrates that writing CSS doesn't always suck.

1. h o w t o b e s t y l i s h a n d s t a y s a n e
HOW TO MAKE YOUR CSS
!
NOT SUCK
Rouan Wilsenach
@rouanw
Socrates Hlapolosa
shlapol@thoughtworks.com

2. 2
“CSS sucks. I just want to write code.”
A lonely developer, after finally getting that
margin-right right

3. 3
Treat CSS like code
Think about your styles
like a consumer

4. CSS SMELLS
4

5. 5
Whoa! That’s a lot of CSS.

6. 6
Writing a lot of CSS for each feature

7. 7
No reuse

8. 8
Everything is special

9. 9
Duplicate CSS

10. 10
Side effects

11. COMPONENT-BASED
!
STYLING
Principles
11

12. 12

13. 13
Pick a component
Include CSS
Use markup structure
Add classes

14. 14
Create your own style guide

15. 15
Living documentation

16. 16
Re-use Consistency

17. 17

18. 18

19. 19
Component shopping

20. 20
Component shopkeeping

21. HOW TO
CSS Tips & Practices
21

23. 23
Style each component once

24. 24
Consistent markup

25. 25Scope specific styles

26. 26
Is this a new component?

27. 27
Be critical of every line

28. 28
Talk about it and keep things simple

29. 29
Mobile first

30. RECAP
Again! Again!
30

31. 31
Treat CSS like code
Critical of every line
Don’t write CSS
Scope specific CSS
Consistent markup

32. 32
Think about your styles
like a consumer
Style once, re-use
Keep it simple
Component shopkeeping

33. SOME RESOURCES
Simple style guide demo
•https://github.com/rouanw/style-guide-demo
!
Other example style guides
•Lonely planet style guide
•Atom text editor
!
Unwind with some amazing CSS puns
•http://www.hongkiat.com/blog/funny-css-puns/
33

34. h o w t o b e s t y l i s h a n d s t a y s a n e
HOW TO MAKE YOUR CSS
!
NOT SUCK
Rouan Wilsenach
@rouanw
Socrates Hlapolosa
shlapol@thoughtworks.com