Rolling Your Own CSS Methodology
-
Upload
fitc -
Category
Technology
-
view
207 -
download
1
Transcript of Rolling Your Own CSS Methodology
![Page 1: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/1.jpg)
ROLLING YOUR OWN CSS METHODOLOGY
Dave Shea
![Page 2: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/2.jpg)
section { color: black;}
![Page 3: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/3.jpg)
section { color: black;}.page section { color: blue;}
![Page 4: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/4.jpg)
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}
![Page 5: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/5.jpg)
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}.page section > ul li:first-child { color: blue;}
![Page 6: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/6.jpg)
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}.page section > ul li:first-child { color: blue;}
@media only screen and (min-width: 480px) {
section, .page section, .page section > ul, .page section > ul li:first-child {
color: orange;}
}
![Page 7: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/7.jpg)
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}.page section > ul li:first-child { color: blue;}
@media only screen and (min-width: 480px) {
section, .page section, .page section > ul, .page section > ul li:first-child {
color: orange;}
}
* { color: black !important;}
![Page 8: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/8.jpg)
CSS is Simple!
![Page 9: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/9.jpg)
![Page 10: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/10.jpg)
So maybe it’s not.
![Page 11: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/11.jpg)
What are we going to do about it?
![Page 12: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/12.jpg)
WHO AM I?
![Page 13: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/13.jpg)
@mezzoblue @mobify
![Page 14: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/14.jpg)
![Page 15: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/15.jpg)
LET’S TALK ABOUT CSS
![Page 16: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/16.jpg)
Why think about this?
![Page 17: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/17.jpg)
OUR PROBLEMS TO SOLVE
![Page 18: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/18.jpg)
Bloated Codebase
![Page 19: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/19.jpg)
Development friction
![Page 20: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/20.jpg)
Growing team
![Page 21: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/21.jpg)
The Goal
![Page 22: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/22.jpg)
WHAT’S A CSS METHODOLGY?
![Page 23: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/23.jpg)
A Naming System
![Page 24: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/24.jpg)
PRIOR ART
• BEM
• OOCSS
• SMACSS
• SuitCSS
![Page 25: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/25.jpg)
Why not use the others?
![Page 26: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/26.jpg)
Why not use Bootstrap or Foundation?
![Page 27: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/27.jpg)
Framework != Methodology
![Page 28: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/28.jpg)
The last thing the world needs is another one.
![Page 29: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/29.jpg)
But we built one anyway
![Page 30: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/30.jpg)
It’s called Argon
![Page 31: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/31.jpg)
Is Argon right for you?
![Page 32: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/32.jpg)
Truthfully… probably not
![Page 33: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/33.jpg)
This is a case study
![Page 34: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/34.jpg)
What To Do
![Page 35: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/35.jpg)
What To Do
![Page 36: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/36.jpg)
WHAT WE WANT FROM ARGON
![Page 37: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/37.jpg)
Predictability
![Page 38: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/38.jpg)
DRY
![Page 39: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/39.jpg)
DRYDon’t Repeat Yourself
![Page 40: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/40.jpg)
.button { display: inline-block; padding: 0.5rem 1rem; border-radius: 3px; color: #fff; background: gradient($grey20, $grey18, 50%); font-size: 1rem; text-decoration: none;}.input { display: inline-block; padding: 0.5rem 1rem; border-radius: 3px; color: #000; background: #fff; font-size: 1rem; text-decoration: none;}
![Page 41: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/41.jpg)
.button, input { display: inline-block; padding: 0.5rem 1rem; border-radius: 3px; font-size: 1rem; text-decoration: none;}.button { color: #fff; background: gradient($grey20, $grey18, 50%);}.input { color: #000; background: #fff;}
![Page 42: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/42.jpg)
Re-usability
![Page 43: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/43.jpg)
.contactpage .submit-form div.inline-options .form-element { display: inline-block; float: left; width: 25%;}
![Page 44: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/44.jpg)
.form .form-element { display: inline-block; float: left; width: 25%;}
![Page 45: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/45.jpg)
Modularity
![Page 46: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/46.jpg)
![Page 47: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/47.jpg)
![Page 48: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/48.jpg)
No specificity battles
![Page 49: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/49.jpg)
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}.page section > ul li:first-child { color: blue;}
@media only screen and (min-width: 480px) {
section, .page section, .page section > ul, .page section > ul li:first-child {
color: orange;}
}
* { color: black !important;}
![Page 50: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/50.jpg)
Team-wide consistency
![Page 51: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/51.jpg)
Argon extra credits: @jam_sbryant & @kbingman
![Page 52: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/52.jpg)
ANATOMY OF A SELECTOR
![Page 53: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/53.jpg)
AT-A-GLANCE UNDERSTANDING
.swift-project.-activeProject ._filterField { width: 25%;}
![Page 54: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/54.jpg)
Ugly selectors? You bet they are.
![Page 55: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/55.jpg)
NAMESPACE
.swift-project.-activeProject ._filterField { width: 25%;}
![Page 56: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/56.jpg)
(Maybe not our best idea)
![Page 57: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/57.jpg)
COMPONENT
.swift-project.-activeProject ._filterField { width: 25%;}
![Page 58: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/58.jpg)
![Page 59: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/59.jpg)
![Page 60: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/60.jpg)
MODIFIER
.swift-project.-activeProject ._filterField { width: 25%;}
![Page 61: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/61.jpg)
![Page 62: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/62.jpg)
![Page 63: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/63.jpg)
DESCENDANT (SUB-COMPONENT)
.swift-project.-activeProject ._filterField { width: 25%;}
![Page 64: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/64.jpg)
![Page 65: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/65.jpg)
![Page 66: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/66.jpg)
![Page 67: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/67.jpg)
ARGON IDEALS
![Page 68: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/68.jpg)
Classes for everything
![Page 69: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/69.jpg)
No ID styling
![Page 70: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/70.jpg)
![Page 71: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/71.jpg)
#nav { margin: 0;}
![Page 72: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/72.jpg)
.nav { margin: 0;}
![Page 73: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/73.jpg)
No styling of HTML elements
![Page 74: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/74.jpg)
h2 { font-size: 1rem;}
![Page 75: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/75.jpg)
.header-2 { font-size: 1rem;}
![Page 76: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/76.jpg)
EXCEPTION
base-html.css
![Page 77: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/77.jpg)
Don’t over-select
![Page 78: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/78.jpg)
THIS IS UNACCEPTABLE
.panel { display: block; margin: 1rem 0; font-size: 0.8rem; }
.panel .panel-wrapper { padding: 1.5rem; }
.panel .panel-list { width: 50%; float: left; }
.panel .panel-list ul.item-list { margin: 0; list-style: none; }
.panel .panel-list ul.item-list li.item { display: block; margin: 0.5rem 0; }
.panel .panel-list ul.item-list li.item a { font-weight: bold; }
.panel .panel-list ul.item-list li.item a:hover, .panel .panel-list ul.item-list li.item a:focus { text-decoration: underline; }.panel .panel-list ul.item-list li.item a span.prompt::before { content: "$ "; }.panel .panel-list ul.item-list li.item a i { font-style: normal; }
![Page 79: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/79.jpg)
![Page 80: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/80.jpg)
![Page 81: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/81.jpg)
NO !important
![Page 82: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/82.jpg)
Argon flattens to BEM
![Page 83: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/83.jpg)
.project__filterField-—conditionValue { width: 25%;}
![Page 84: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/84.jpg)
.swift-project ._filterField.-conditionValue { width: 25%;}
![Page 85: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/85.jpg)
.swift-project .__filterField.--conditionValue { width: 25%;}
![Page 86: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/86.jpg)
.swift-project .__filterField.--conditionValue { width: 25%;}
![Page 87: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/87.jpg)
.swift-project ._filterfield.-conditionvalue { width: 25%;}
![Page 88: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/88.jpg)
.swift-project ._filterfield.-conditionvalue { width: 25%;}
![Page 89: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/89.jpg)
NESTED ARGON.swift-project { ._filterList { width: 50%; } &.-activeProject { ._filterList { width: 100%; } } ._filterField { &.-conditionValue { width: 25%; } }}
![Page 90: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/90.jpg)
vs. BEM
.swift-project__filterList { width: 50%;}.swift-project--activeProject__filterList { width: 100%;}.swift-project__filterField--conditionValue { width: 25%;}
![Page 91: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/91.jpg)
HTML (ARGON)
<div class="swift-project -activeProject"> <div class="_filterList"> <input type="text" class="_filterField" /> <input type="text" class="_filterField" /> </div> <button type="submit" class="_filterApply"> Okay </button></div>
![Page 92: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/92.jpg)
HTML (BEM)
<div class="swift-project--activeProject"> <div class="swift-project--activeProject__filterList"> <input type="text" class="swift-project--activeProject__filterField" /> <input type="text" class="swift-project--activeProject__filterField" /> </div> <button type="submit" class="swift-project--activeProject__filterApply"> Okay </button></div>
![Page 93: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/93.jpg)
Exceptions
![Page 94: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/94.jpg)
JAVASCRIPT? DON’T TOUCH!
.jsSwiftProject { width: 25%; // NO! BAD!!!}
![Page 95: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/95.jpg)
STATES? ONLY VISIBILITY STYLING
.is-visible { display: inline-block;}.is-hidden { display: none;}
![Page 96: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/96.jpg)
OTHER STUFF WE HAVE RULES FOR
• White space
• Style rule ordering
• File structure
• z-index scale
• Typography scale
• Grid system
• Colour
• etc.
![Page 97: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/97.jpg)
FURTHER READING / WATCHING• High-level advice and guidelines for writing sane, manageable, scalable CSS
• The Modular CSS (BEM/OOCSS) naming conundrum
• Medium’s CSS is actually pretty f***ing good.
• Slaying the Dragon: Refactoring CSS for Maintainability – Alicia Liu at Front-Trends 2014
• Code Refactoring for America
• Pixels are expensive
• Let’s Play Nice with CSS Tools & Methodologies – Brad Westfall at HTML5DevConf
![Page 98: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/98.jpg)
ROLLOUT
![Page 99: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/99.jpg)
New features only
![Page 100: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/100.jpg)
![Page 101: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/101.jpg)
![Page 102: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/102.jpg)
![Page 103: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/103.jpg)
![Page 104: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/104.jpg)
![Page 105: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/105.jpg)
![Page 106: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/106.jpg)
![Page 107: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/107.jpg)
But, the design changed!
![Page 108: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/108.jpg)
![Page 109: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/109.jpg)
![Page 110: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/110.jpg)
OUTCOME
![Page 111: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/111.jpg)
Ramp up?
![Page 112: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/112.jpg)
NEED GREAT DOCS
![Page 113: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/113.jpg)
Forces thought
![Page 114: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/114.jpg)
Quick code reviews
![Page 115: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/115.jpg)
![Page 116: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/116.jpg)
Debugging
![Page 117: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/117.jpg)
![Page 118: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/118.jpg)
![Page 119: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/119.jpg)
Over-reliance on modifiers
![Page 120: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/120.jpg)
File sizes?
![Page 121: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/121.jpg)
Only works for controlled systems
![Page 122: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/122.jpg)
Will the cost:benefit ratio break down?
![Page 123: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/123.jpg)
WRAPPING UP
![Page 124: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/124.jpg)
The big breakthrough:
![Page 125: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/125.jpg)
It’s not the syntax
![Page 126: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/126.jpg)
It’s the discipline
![Page 127: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/127.jpg)
Every project? No.
![Page 128: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/128.jpg)
Favour shipping
![Page 129: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/129.jpg)
Be wary of “The Perfect Syntax”
![Page 130: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/130.jpg)
The proof is in the implementation
![Page 131: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/131.jpg)
Build systems that people understand
![Page 132: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/132.jpg)
THANKS!http://mezzoblue.com/presentations/2015/fitc
![Page 133: Rolling Your Own CSS Methodology](https://reader030.fdocuments.net/reader030/viewer/2022020218/55a668631a28abc5668b4659/html5/thumbnails/133.jpg)
FURTHER RESOURCES• A Maintainable Style Guide
• Combine matching media queries with Grunt
• Setting up Sass and Compass with source maps
• Using source maps with Sass 3.3
• csste.st - The How and Why of CSS Testing
• Code refactoring for America