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
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Domain-Driven Transformation
hschwentner
2
1.9k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Unity Android XR入門
sakutama_11
0
140
Open source software: how to live long and go far
gaelvaroquaux
0
620
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Cult of Friendly URLs
andyhume
78
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
4 Signs Your Business is Dying
shpigford
182
22k
Docker and Python
trallard
44
3.3k
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