HowAboutWe for Couples Views & Styles Patterns

in Rails

Transcript

1. Overview of Couples Views/Styles HowAboutWe Server 1 pointer March 26, 2013
2. • logic in views is harder to test • views are difficult to reason about Problem: Our Views are messy WTF is happening here??
3. Fix #0: SASS and View Styleguide! https://github.com/howaboutwe/sass-style-guide
4. NOT DESIGN Markup is about content
6. Use SASS THE GOOD PARTS
8. Variables are your friend
9. Mixin it up ... WITH
10. Decorators & Helpers WHEN SHIT GETS COMPLICATED
11. Decorators Logic moves with the OBJECT Helpers Logic moves with the VIEW
12. Move logic out of views When • if statements • ternary • lots of states • It hurts my head Then Generate in (testable) code • Classes • Copy • Html attributes
13. This
14. TO
15. How?
16. Generate classes
17. Move classes up
19. Generate Copy
20. Encapsulate repetition in partials Sometimes zero Sometimes one Sometimes two
22. Generate html attributes From TO WITH
23. Our current pattern • Use & enforce styleguide for SASS & views • Markup is about content not design • Use SASS ◦ variables ◦ mixins • Move classes up & design changes to CSS • Use decorators (or helpers) to: ◦ Generate classes ◦ Generate copy ◦ Generate HTML attributes