Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 Hlapolo...
2
“CSS sucks. I just want to write code.”
A lonely developer, after finally getting that
margin-right right
3
Treat CSS like code
Think about your styles
like a consumer
CSS SMELLS
4
5
Whoa! That’s a lot of CSS.
6
Writing a lot of CSS for each feature
7
No reuse
8
Everything is special
9
Duplicate CSS
10
Side effects
COMPONENT-BASED
!
STYLING
Principles
11
12
13
Pick a component
Include CSS
Use markup structure
Add classes
14
Create your own style guide
15
Living documentation
16
Re-use Consistency
17
18
19
Component shopping
20
Component shopkeeping
HOW TO
CSS Tips & Practices
21
23
Style each component once
24
Consistent markup
25Scope specific styles
26
Is this a new component?
27
Be critical of every line
28
Talk about it and keep things simple
29
Mobile first
RECAP
Again! Again!
30
31
Treat CSS like code
Critical of every line
Don’t write CSS
Scope specific CSS
Consistent markup
32
Think about your styles
like a consumer
Style once, re-use
Keep it simple
Component shopkeeping
SOME RESOURCES
Simple style guide demo
•https://github.com/rouanw/style-guide-demo
!
Other example style guides
•Lonely pl...
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 Hlapolo...
How to make your css not suck
Upcoming SlideShare
Loading in …5
×

How to make your css not suck

483 views

Published on

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.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

How to make your css not suck

  1. 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. 2 “CSS sucks. I just want to write code.” A lonely developer, after finally getting that margin-right right
  3. 3. 3 Treat CSS like code Think about your styles like a consumer
  4. 4. CSS SMELLS 4
  5. 5. 5 Whoa! That’s a lot of CSS.
  6. 6. 6 Writing a lot of CSS for each feature
  7. 7. 7 No reuse
  8. 8. 8 Everything is special
  9. 9. 9 Duplicate CSS
  10. 10. 10 Side effects
  11. 11. COMPONENT-BASED ! STYLING Principles 11
  12. 12. 12
  13. 13. 13 Pick a component Include CSS Use markup structure Add classes
  14. 14. 14 Create your own style guide
  15. 15. 15 Living documentation
  16. 16. 16 Re-use Consistency
  17. 17. 17
  18. 18. 18
  19. 19. 19 Component shopping
  20. 20. 20 Component shopkeeping
  21. 21. HOW TO CSS Tips & Practices 21
  22. 22. 23 Style each component once
  23. 23. 24 Consistent markup
  24. 24. 25Scope specific styles
  25. 25. 26 Is this a new component?
  26. 26. 27 Be critical of every line
  27. 27. 28 Talk about it and keep things simple
  28. 28. 29 Mobile first
  29. 29. RECAP Again! Again! 30
  30. 30. 31 Treat CSS like code Critical of every line Don’t write CSS Scope specific CSS Consistent markup
  31. 31. 32 Think about your styles like a consumer Style once, re-use Keep it simple Component shopkeeping
  32. 32. 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
  33. 33. 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

×