Successfully reported this slideshow.
Your SlideShare is downloading. ×

How to make your css not suck

Ad

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...

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 34 Ad
1 of 34 Ad

How to make your css not suck

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Advertisement

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

×