Rolling Your Own CSS Methodology

ROLLING YOUR OWN
CSS METHODOLOGY
Dave Shea

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;
}
color: black;
}
.page section > ul li:first-child {
color: blue;
}

section {
color: black;
}
.page section {
color: blue;
}
color: black;
}
color: blue;
}
@media only screen and (min-width: 480px) {
section,
.page section,
.page section > ul,
color: orange;
}
}

section {
color: black;
}
.page section {
color: blue;
}
color: black;
}
color: blue;
}
@media only screen and (min-width: 480px) {
section,
.page section,
.page section > ul,
color: orange;
}
}
* {
color: black !important;
}

Rolling Your Own CSS Methodology

What are we going
to do about it?

PRIOR ART
• BEM
• OOCSS
• SMACSS
• SuitCSS

Why not use
Bootstrap or
Foundation?

The last thing
the world needs
is another one.

.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 {
border-radius: 3px;
color: #000;
background: #fff;
font-size: 1rem;
}

.button, input {
border-radius: 3px;
font-size: 1rem;
}
.button {
color: #fff;
background: gradient($grey20, $grey18, 50%);
}
.input {
color: #000;
background: #fff;
}

.contactpage .submit-form div.inline-options .form-element {
float: left;
width: 25%;
}

.form .form-element {
float: left;
width: 25%;
}

Argon extra credits: @jam_sbryant & @kbingman

AT-A-GLANCE UNDERSTANDING
.swift-project.-activeProject ._filterField {
width: 25%;
}

Ugly selectors?
You bet they are.

NAMESPACE
width: 25%;
}

COMPONENT
width: 25%;
}

MODIFIER
width: 25%;
}

DESCENDANT (SUB-COMPONENT)
width: 25%;
}

.header-2 {
font-size: 1rem;
}

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; }

.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>

JAVASCRIPT? DON’T TOUCH!
.jsSwiftProject {
width: 25%; // NO! BAD!!!
}

STATES? ONLY VISIBILITY STYLING
.is-visible {
}
.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

Only works for
controlled systems

Will the cost:benefit
ratio break down?

Be wary of “The
Perfect Syntax”

The proof is in the
implementation

Build systems that
people understand

THANKS!
http://mezzoblue.com/presentations/2015/ﬁtc

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

Rolling Your Own CSS Methodology

Related slideshows

More Related Content

Rolling Your Own CSS Methodology