Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HowAboutWe for Couples Views & Styles Patterns
Search
Rebecca Miller-Webster
March 27, 2013
Programming
0
63
HowAboutWe for Couples Views & Styles Patterns
in Rails
Rebecca Miller-Webster
March 27, 2013
Tweet
Share
More Decks by Rebecca Miller-Webster
See All by Rebecca Miller-Webster
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Trust & Teams: 2019 Chicago CTO Summit
rmw
2
270
Refactoring Trust on Your Team (CTO Summit 2018)
rmw
1
1.3k
Trust and Teams: GORUCO 2017
rmw
0
220
Becoming an Engineer Leader Panel Intro Slide
rmw
0
270
Frameworks for Feedback (Long version) - 2016 May Self Conference
rmw
2
860
Frameworks for Feedback (2015 May - RailsConf)
rmw
1
470
Frameworks for Feedback - DevOpsDays Chicago
rmw
0
880
Tech Talk 101: Topic Generation
rmw
0
340
Other Decks in Programming
See All in Programming
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
5
390
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
150
Honoとフロントエンドの 型安全性について
yodaka
7
1.3k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
38
15k
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
5
1k
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
150
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
140
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fireside Chat
paigeccino
34
3.2k
A better future with KSS
kneath
238
17k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Practical Orchestrator
shlominoach
186
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Designing for Performance
lara
604
68k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
330
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Transcript
Overview of Couples Views/Styles HowAboutWe Server 1 pointer March 26,
2013
• logic in views is harder to test • views
are difficult to reason about Problem: Our Views are messy WTF is happening here??
Fix #0: SASS and View Styleguide! https://github.com/howaboutwe/sass-style-guide
NOT DESIGN Markup is about content
None
Use SASS THE GOOD PARTS
None
Variables are your friend
Mixin it up ... WITH
Decorators & Helpers WHEN SHIT GETS COMPLICATED
Decorators Logic moves with the OBJECT Helpers Logic moves with
the VIEW
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
This
TO
How?
Generate classes
Move classes up
None
Generate Copy
Encapsulate repetition in partials Sometimes zero Sometimes one Sometimes two
None
Generate html attributes From TO WITH
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