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
56
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
26
2.3k
Trust & Teams: 2019 Chicago CTO Summit
rmw
2
180
Refactoring Trust on Your Team (CTO Summit 2018)
rmw
1
1k
Trust and Teams: GORUCO 2017
rmw
0
150
Becoming an Engineer Leader Panel Intro Slide
rmw
0
180
Frameworks for Feedback (Long version) - 2016 May Self Conference
rmw
2
620
Frameworks for Feedback (2015 May - RailsConf)
rmw
1
390
Frameworks for Feedback - DevOpsDays Chicago
rmw
0
800
Tech Talk 101: Topic Generation
rmw
0
280
Other Decks in Programming
See All in Programming
HonoのRPCで真の型安全が欲しかった
kosei28
1
160
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Namespace, What and Why
tagomoris
4
1.1k
Deep Dive into React Stream/Serialize
mugi_uno
4
880
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
160
Runtime Objects in Rust
mitsuhiko
0
220
TypeScriptから始める VR生活
tamagokakeg
2
130
Good first issues of TypeProf
mame
4
870
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
960
Embedding it into Ruby code
soutaro
2
420
GoでParserを書く
karupanerura
3
440
Featured
See All Featured
Embracing the Ebb and Flow
colly
80
4.2k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Building Your Own Lightsaber
phodgson
100
5.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Adopting Sorbet at Scale
ufuk
69
8.6k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The Cult of Friendly URLs
andyhume
74
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
A better future with KSS
kneath
231
16k
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