Download to read offline
How to make your css not suck
- 1. h o wt 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. Ijust want to write code.” A lonely developer, after finally getting that margin-right right
- 3. 3 Treat CSS likecode Think about your styles like a consumer
- 4.
- 5. 5 Whoa! That’s alot of CSS.
- 6. 6 Writing a lotof CSS for each feature
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 13 Pick a component IncludeCSS Use markup structure Add classes
- 14. 14 Create your ownstyle guide
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. HOW TO CSS Tips& Practices 21
- 23.
- 24.
- 25.
- 26. 26 Is this anew component?
- 27. 27 Be critical ofevery line
- 28. 28 Talk about itand keep things simple
- 29.
- 30.
- 31. 31 Treat CSS likecode Critical of every line Don’t write CSS Scope specific CSS Consistent markup
- 32. 32 Think about yourstyles like a consumer Style once, re-use Keep it simple Component shopkeeping
- 33. SOME RESOURCES Simple styleguide 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 wt 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