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
870
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
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
380
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
190
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
楽しく向き合う例外対応
okutsu
0
500
Domain-Driven Transformation
hschwentner
2
1.9k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
140
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Being A Developer After 40
akosma
89
590k
KATA
mclloyd
29
14k
4 Signs Your Business is Dying
shpigford
182
22k
A Philosophy of Restraint
colly
203
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Six Lessons from altMBA
skipperchong
27
3.6k
The Cult of Friendly URLs
andyhume
78
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Building Your Own Lightsaber
phodgson
104
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
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