How to make your css not suck
Jul. 10, 2015•0 likes•634 views
Download to read offline
Report
Internet
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.
rouanwFollow
More Related Content
Similar to How to make your css not suck
Creating Living Style Guides to Improve PerformanceNicole Sullivan
CSS Best Practicesnolly00
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Styling your projects! leveraging css and r sass in r projectsAppsilon Data Science
CSS newAndrew Mykhalchuk
CSS SystemsNatalie Downe
More from rouanw
NDC Security 2023rouanw
Is this okay!? DevSecCon ⚡ 2022rouanw
Fail better with QA in Productionrouanw
Qa in production singular 2019rouanw
How to review a pull requestrouanw
Rouan's design principlesrouanw
Recently uploaded
Binisha.pptxSuvamMaharjan1
informatica1.pptxAlessandroSichetti
Networking Basic Refresh.pdfCS Knowledge
![[FediForum] Reisman FairPay - Rethinking Revenue.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/fediforumreismanfairpay-rethinkingrevenue-230921142132-d55847d0-thumbnail.jpg?width=384&height=256&fit=bounds)
[FediForum] Reisman FairPay - Rethinking Revenue.pdfTeleshuttle Corporation
Streaming data using aws serverless in a bank - AWS Community day NL 2023Jacob Verhoeks
The value of measuring your accessibility maturityIntopia
![[FediForum] Reisman FairPay - Rethinking Revenue.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/fediforumreismanfairpay-rethinkingrevenue-230921142132-d55847d0-thumbnail.jpg?width=1600&height=908&fit=bounds)
How to make your css not 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