an opening thought... – Foundation?
an opening thought... – Foundation?
0 4
sassquatch-presentation
Presentation on Strangler Vine patterns, CSS, and the Sassquatch projectOn Github akdetrick / sassquatch-presentation
Let's talk about CSS*!
*and Sass
I'm Adam Detrick and I work for Meetup
adamd@meetup.com | @akdetrick
an opening thought...
CSS problems at Meetup
-
meetup is over 10 years old
- ~1000 jsp files
- ~180 scss files
- over 2000 instacnes of "color:" in compiled css
- we hit the css limit in internet explorer
- lots of engineers; potential for inconsistency
- we went years without dedicated designers
Some CSS problems are notunique to Meetup
- design consistency
- reinventing solutions to problems that have already been solved
- overly-specific (and hard to reuse) CSS
- lack of a canonnical way to accomplish a given task
- existing code is hard to document
- unending cycle of code bloat
Let's throw out this crap and rewrite everything!
"It will only take a few months"
Starting clean isnot a solution
... and it's frustrating
Let's talk about botany for a moment
Strangler Vines
Tropical plants that grow on host trees
flickr/edrabbit
flickr/nancybaym
flickr/laughingface
flickr/anitagould
The Strangler Pattern
As introduced by Martin Fowler
"... create a new system around the edges of the old, letting it grow slowly until the old system is strangled."
"... you should design [your new application] to make it easier to be strangled in the future."
"Let's face it, all we are doing is writing tomorrow's legacy software today."
What about CSS?
A successful strangler application needs...
- A way to introduce a new system without breaking the current one
- The ability to make incremental changes to replace legacy code
CSS
is for cascade
Strangling CSS
"Seed" the top of your cascade with a new CSS foundation
Foundation?
Sass utilities
vars, functions, etc.
Custom "normalize" css
handles element defaults, typography, etc.
A basic layout system
oocss grids, responsive grid system, susy, etc.
Modifier classes
simple, standard styling helpers
.leading-top { padding-top: $spacing; }
.ellipsize {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
What happens to legacy CSS?
Growing your strangler vines
Markup
<div id="mySpecialThing">
<div id="specialThingHeading">
It's special.
</div>
<div id="specialThingContent">
<span>Really</span> special.
</div>
</div>
<h2>
It's not special.
</h2>
<p>
It just <em>makes sense</em> now.
</p>
CSS
#mySpecialThing {
/* ... bunch o' rules ... */
}
#specialThingHeading {
/* ... bunch o' rules ... */
}
#specialThingContent {
/* ... bunch o' rules ... */
}
#specialThingContent span {
/* ... bunch o' rules ... */
}
/* lol, nope */
You're able to start deleting legacy CSS...
As you repeat this process...
More and more of the legacy CSS goes away...
Eventually leaving you with something more like this:
Building the foundation
Design + Code 4 eva
design for systems, not for pages
code for systems, not for pages
Style tiles
Type speicimens
Element defaults
$headingFontStack: 'Whitney', helvetica, arial, sans-serif;
h1,h2,h3,h4,h5,h6 {
font-family: $headingFontStack;
color: $C_textPrimary;
margin: 0;
padding: 0;
padding-bottom: $baseline/2;
line-height: 1.1;
font-weight: $W_bold;
.inverted & {
color: $C_textPrimaryInverted;
}
}
Meet Sassquatch
A CSS foundation for Meetup
(we use this as our strangler vine)
Demo Time
Let's look at some Code
_crustybase.scss
Killing 300kb of CSS,one page at a time
<jsp:param name="isModernLayout" value="${true}" />
<c:choose>
<c:when test="${not empty param.isModernLayout}">
<c:set var="mainStylesheetPath" value="/style/meetup-modern.css" />
</c:when>
<c:otherwise>
<c:set var="mainStylesheetPath" value="/style/meetup.css" />
</c:otherwise>
</c:choose>
Where are we now?
Added bonus
Sassquatch consolidated domain-specific knowledge
a closing thought...
Thanks!
github.com/akdetrick/sassquatch-presentation