Upload
fitc
View
206
Download
1
Embed Size (px)
Citation preview
ROLLING YOUR OWN CSS METHODOLOGY
Dave Shea
section { color: black;}
section { color: black;}.page section { color: blue;}
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}
section { color: black;}.page section { color: blue;}.page section > ul { color: black;}.page section > ul li:first-child { color: blue;}
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;}
}
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;}
CSS is Simple!
So maybe it’s not.
What are we going to do about it?
WHO AM I?
@mezzoblue @mobify
LET’S TALK ABOUT CSS
Why think about this?
OUR PROBLEMS TO SOLVE
Bloated Codebase
Development friction
Growing team
The Goal
WHAT’S A CSS METHODOLGY?
A Naming System
PRIOR ART
• BEM
• OOCSS
• SMACSS
• SuitCSS
Why not use the others?
Why not use Bootstrap or Foundation?
Framework != Methodology
The last thing the world needs is another one.
But we built one anyway
It’s called Argon
Is Argon right for you?
Truthfully… probably not
This is a case study
What To Do
What To Do
WHAT WE WANT FROM ARGON
Predictability
DRY
DRYDon’t Repeat Yourself
.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;}
.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;}
Re-usability
.contactpage .submit-form div.inline-options .form-element { display: inline-block; float: left; width: 25%;}
.form .form-element { display: inline-block; float: left; width: 25%;}
Modularity
No specificity battles
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;}
Team-wide consistency
Argon extra credits: @jam_sbryant & @kbingman
ANATOMY OF A SELECTOR
AT-A-GLANCE UNDERSTANDING
.swift-project.-activeProject ._filterField { width: 25%;}
Ugly selectors? You bet they are.
NAMESPACE
.swift-project.-activeProject ._filterField { width: 25%;}
(Maybe not our best idea)
COMPONENT
.swift-project.-activeProject ._filterField { width: 25%;}
MODIFIER
.swift-project.-activeProject ._filterField { width: 25%;}
DESCENDANT (SUB-COMPONENT)
.swift-project.-activeProject ._filterField { width: 25%;}
ARGON IDEALS
Classes for everything
No ID styling
#nav { margin: 0;}
.nav { margin: 0;}
No styling of HTML elements
h2 { font-size: 1rem;}
.header-2 { font-size: 1rem;}
EXCEPTION
base-html.css
Don’t over-select
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; }
NO !important
Argon flattens to BEM
.project__filterField-—conditionValue { width: 25%;}
.swift-project ._filterField.-conditionValue { width: 25%;}
.swift-project .__filterField.--conditionValue { width: 25%;}
.swift-project .__filterField.--conditionValue { width: 25%;}
.swift-project ._filterfield.-conditionvalue { width: 25%;}
.swift-project ._filterfield.-conditionvalue { width: 25%;}
NESTED ARGON.swift-project { ._filterList { width: 50%; } &.-activeProject { ._filterList { width: 100%; } } ._filterField { &.-conditionValue { width: 25%; } }}
vs. BEM
.swift-project__filterList { width: 50%;}.swift-project--activeProject__filterList { width: 100%;}.swift-project__filterField--conditionValue { width: 25%;}
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>
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>
Exceptions
JAVASCRIPT? DON’T TOUCH!
.jsSwiftProject { width: 25%; // NO! BAD!!!}
STATES? ONLY VISIBILITY STYLING
.is-visible { display: inline-block;}.is-hidden { display: none;}
OTHER STUFF WE HAVE RULES FOR
• White space
• Style rule ordering
• File structure
• z-index scale
• Typography scale
• Grid system
• Colour
• etc.
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
ROLLOUT
New features only
But, the design changed!
OUTCOME
Ramp up?
NEED GREAT DOCS
Forces thought
Quick code reviews
Debugging
Over-reliance on modifiers
File sizes?
Only works for controlled systems
Will the cost:benefit ratio break down?
WRAPPING UP
The big breakthrough:
It’s not the syntax
It’s the discipline
Every project? No.
Favour shipping
Be wary of “The Perfect Syntax”
The proof is in the implementation
Build systems that people understand
THANKS!http://mezzoblue.com/presentations/2015/fitc
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