ACSS: Rethinking CSS Best Practices

Rethinking CSS Best Practices
Renato Iwashima
@renatoiwa

Thursday, October 24, 13

The Separation of Concerns

Image by Les_Stockton on


CSS
Javascript
HTML


<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
</div>


</div>
.my-module {
! background: whiteSmoke;
! padding: 10px;
}


</div>
.my-module {
! padding: 10px;
}
.my-module .headline {
font-size: 20px;
font-weight: bold;
border-bottom: 1px dotted #333;
}


</div>
.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
.my-module .subhead {
font-size: 16px;
font-weight: 200;
}


</div>
.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
font-size: 16px;
font-weight: 200;
}
.my-module .body {
padding: 10px;
}


<div class="mymodule">
<div class="body">
<p>Body text</p>
</div>
</div>

.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
font-size: 16px;
font-weight: 200;
}
.my-module .body {
padding: 10px;
}


<div class="body">
<p>Body text</p>
<h4 class="subsubhead">Subsubhead</h4>
<p>Body text</p>
</div>
</div>
.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
font-size: 16px;
font-weight: 200;
}
.my-module .body {
padding: 10px;
}


<div class="body">
<p>Body text</p>
<p>Body text</p>
</div>
</div>
.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
font-size: 16px;
font-weight: 200;
}
.my-module .body {
padding: 10px;
}
.my-module .subsubhead {
}


<div class="body">
<p>Body text</p>
<p>Body text</p>
</div>
</div>
.my-module {
! padding: 10px;
}
font-size: 20px;
font-weight: bold;
}
font-size: 16px;
font-weight: 200;
}
.my-module .body {
padding: 10px;
}
}


Growth

<div class="body">
<p>Body text</p>
<p>Body text</p>
</div>
</div>
.mymodule {
! padding: 10px;
}
.mymodule .headline {
font-size: 20px;
font-weight: bold;
}
.mymodule .subhead {
font-size: 16px;
font-weight: 200;
}
.mymodule .body {
padding: 10px;
}
.mymodule .headline,
.mymodule .subsubhead {
}

0


.my-module .headline,
}


.my-module .subsubhead,
.something-else-001 {
}


.something-else-001,
}


}


.heading {
}


.heading

.heading


border-bottom-color: red;
}


}
.page-1 .my-module .headline {
border-bottom-color: navy;
}


}
}
border-bottom-color: orange;
}


Growth


}
}
}

Growth

}
}
}
Speciﬁcity


Current UI Page Architecture
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer


Normalize
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer


Normalize

Layout
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer


Normalize

Layout

Reusable Patterns

Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer


Normalize

Layout

Reusable Patterns

Header

Module 1 CSS

Module 1

Module 2

Module 2 CSS

Module 3 CSS

Module 3

Module 4

Module 4 CSS

Module 5 CSS

Module 5

Module 6

Module 6 CSS

Footer


Current UI Architecture on Multiple Pages

Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module 1

Module 1
Module
2

Module 3

Module
4

Module
6
Module 5

Module 5
Footer


Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

NORMALIZE

Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module 1

Module 1
Module
2

Module 3

Module
4

Module
6
Module 5

Module 5
Footer


Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

NORMALIZE
REUSABLE PATTERNS

Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module 1

Module 1
Module
2

Module 3

Module
4

Module
6
Module 5

Module 5
Footer


Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

NORMALIZE
REUSABLE PATTERNS
PAGE SPECIFIC STYLES




MODULE 1 CSS

MODULE 1 CSS

MODULE 1 CSS

MODULE 1 CSS

MODULE 2 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 2 CSS

MODULE 3 CSS

MODULE 5 CSS

MODULE 6 CSS

MODULE 3 CSS

MODULE 4 CSS

MODULE 6 CSS

MODULE 6 CSS

MODULE 5 CSS
MODULE 6 CSS
Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module 1

Module 1
Module
2

Module 3

Module
4

Module
6
Module 5

Module 5
Footer


Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

Large Scale Websites Modularity

Poor caching from page to page
Limited reusability of styles
Speciﬁcity wars
Contextual selectors used to scope styles
Bloat!


Where we want to be
NORMALIZE
REUSABLE PATTERNS




MODULE 1 CSS

MODULE 1 CSS

MODULE 1 CSS

MODULE 1 CSS

MODULE 2 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 2 CSS

MODULE 3 CSS

MODULE 5 CSS

MODULE 6 CSS

MODULE 3 CSS

MODULE 4 CSS

MODULE 6 CSS

MODULE 6 CSS

MODULE 5 CSS
MODULE 6 CSS
Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module 1

Module 1
Module
2

Module 3

Module
4

Module
6
Module 5

Module 5
Footer


Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

Where we want to be

MODULE 1 CSS
MODULE 2 CSS
MODULE 3 CSS
Header

MODULE 4 CSS
Module
MODULE
Module 1 5 CSS
2
MODULE 6 CSS
Module 3

NORMALIZE

MODULE 1 CSS
MODULE 1 CSS
REUSABLE PATTERNS
MODULE 4 CSS
MODULE 5 CSS
MODULE 5 CSS
MODULE 6 CSS
Header

MODULE 6 CSS
Module 1

Footer


MODULE 2 CSS
MODULE 3 CSS
Header

MODULE 6 CSS

Module 1

Module 1
Module
2

Module
4

Module
6
Module 5

Module 5

Module
4

Header

MODULE 1 CSS

Module
6

Module 5

Module 3
Module
6

Module
6
Footer

Footer

Footer

Semantic Class Names

Other than microformats,
class names are used for presentational
purpose or javascript hooks.


Let’s talk about
Semantic Class Names


se·man·tic
adjective
1. relating to meaning in language or logic.


.title
bold large text


.bold and .large
bold large text


Bootstrap

.text-left
.text-right
.text-center
.pull-right
.pull-left
.affix
.invisible
.hidden


{
{
{
{
{
{
{
{

text-align: left;
}
text-align: right;
}
text-align: center;
}
float: right !important; }
float: left !important; }
position: fixed;
}
visibility: hidden;
}
display: none !important;}

Foundation

.text-left
.text-right
.text-center
.text-justify
.left
.right
.hide


{
{
{
{
{
{
{

text-align: left !important;
text-align: right !important;
text-align: center !important;
text-align: justify !important;
float: left !important;
float: right !important;
display: none;

}
}
}
}
}
}
}

But we usually stop short
since best practices is to
style elements using classes
related to content.


BUT
WHY?

Maintenance
CSS maintenance


SEO & Responsive Web Design
Same HTML: Crawling optimization
AWD: Vary HTTP header
Responsive Page Grid


HTML5 speciﬁcation section on classes
... authors are encouraged to use [class
attribute] values that describe the
nature of the content, rather than
values that describe the desired
presentation of the content.


Nicolas Gallagher
About HTML Semantics Front End Architecture
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/


...there is no inherent reason to do this. In
fact, it’s often a hindrance when working on
large websites or applications.


The most reusable components are
those with class names that are
independent of the content.


Class names should communicate useful
information to developers


Wilson Page
Building the new ﬁnancial times web app
http://coding.smashingmagazine.com/2013/05/23/building-the-new-ﬁnancial-times-web-app/


Components need to be dumb, they can’t know
anything of their context, or the consequences of
any interactions that may occur within them.


Fruit Classes
.apple_headline {
font-size: 40px;
}
.apple_sub-head {
font-size: 20px;
}
.apple_body {
font-size: 14px;
column-count: 2;
color: #333;
}

<div class="apple">
<h2 class="apple_headline">{{headline}}</h2>
<h3 class="apple_sub-head">{{subhead}}</h3>
<div class="apple_body">{{body}}</div>
</div>


Reusable
Hard to know what the class is for


Nicole Sullivan
Our Best Practices Are Killing Us
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/


Redundancy
Bloat
Speciﬁcity wars


Keep speciﬁcity as low as
possible and abstract repeating
visual patterns


Treat code like Lego. Break code into the
smallest little blocks possible.
smashing magazine - @csswizardry (via @stubbornella) #btconf


Atomic CSS

Image by Alexey Vinokurov on


a·tom·ic
adjective
1. of or forming a single irreducible unit
or component in a larger system


Class names inspired by
Zen Coding (Emmet)


.Fl-start
.Fl-end
.Fl-n
.Cur-p
.Fz-l
.Fz-xl
.Mstart-10


{
{
{
{
{
{
{

float: left;
float: right;
float: none;
cursor: pointer;
font-size: 18px;
font-size: 20px;
margin-left: 10px;

}
}
}
}
}
}
} /* wOOt */

How can your design evolve?


Switching context:
Instead of stylesheets you would
be managing templates.


Node.js and the new web front-end
Nicholas Zakas


Possibly coming in the future


<details open>
<summary>Timepieces</summary>
<ul>
<li>Sundial</li>
<li>Cuckoo clock</li>
<li>Wristwatch</li>
</ul>
</details>


<details open>
<a id="summary">
&blacktriangledown;
<summary>Timepieces</summary>
</a>
<ul>
<li>Sundial</li>
<li>Cuckoo clock</li>
<li>Wristwatch</li>
</ul>
</details>

details[open]

{ decorator: url(#details-open); }

<decorator id="details-open">
<template>
<a id="summary">
&blacktriangledown;
<content select="summary"></content>
</a>
<content></content>
</template>
</decorator>


What goes into my stylesheet?


Basic rules like ﬂoating an element
Helper classes


/**
* one liner with ellipsis
* 1. we inherit hyphens:auto from body which would break "Ell" in table cells
*/
.Ell {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-hyphens: none; /* 1 */
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
/**
* kinda line-clamp
* 2 lines according to default font-size/line-height
*/
.LineClamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
line-height: 1.25;
max-height: 32px;
_height: 32px;
overflow: hidden;
}


Reduces style scope
Reduces stylesheets bloat
Improves performance
Removes dependencies
Allows to share content and assets easily
Leverages cache by being immutable
Facilitates RTL/LTR interface switch


Use Case
Media Object


Conventional

<div class="media">
<a class="pull-left" href="#">...</a>
<div class="media-body">...</div>
</div>

Fl


BFC

3 Column Page Layout

Fl

BFC

Media object?


Fl

Atomic

<div class="Bfc">
<a class="Fl-start" href="#">...</a>
<div class="Bfc">...</div>
</div>

Fl


BFC

Atomic
<div class="Bfc">
<div class="Fl-start">...</div>
<div class="Fl-end">...</div>
<div class="Bfc">...</div>
</div>

Fl


BFC

Fl

Atomic

<div class="Bfc">
<div class="Fl-start">...</div>
<div class="Fl-end">...</div>
</div>
<p>...</p>

Fl


Fl

Use Case
Hero Unit


Conventional
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
</div>


Atomic
<h1 class="Fz-xl Fw-b">Heading</h1>
<p class="Fz-l Fw-200">Tagline</p>


Reusable
It has a real meaning
Just by looking at the markup you already
know how it will look like


CSS bloat vs HTML bloat

Image by NASA Goddard Space Flight Center on


The data needs to live
somewhere


.wrapper vs .bfc


Good gzip compression

.M-1
.M-2
.M-4
.M-6
.M-8


{margin:
{margin:
{margin:
{margin:
{margin:

1px;}
2px;}
4px;}
6px;}
8px;}

Measurements
Study

Compressed

Uncompressed

News

67.0 KB

267 KB

Sports

61.4 KB

230 KB

ACSS

38.3 KB

154 KB


Atomic vs Inline Styles

Image by MrMeik on


Inline Styles

ACSS

Speciﬁcity
1.0.0.0

Speciﬁcity
0.0.1.0
Scope
Portability

Verbosity


Abstraction
Mapping

Real World Results


Conventional
answers.yahoo.com

30.1KB

sports.yahoo.com

67.4KB

omg.yahoo.com

46.2KB

yahoo.com

45.9KB

my.yahoo.com

21.3KB (18KB + 3KB)

Atomic


Conventional
answers.yahoo.com

30.1KB

sports.yahoo.com

67.4KB

omg.yahoo.com

46.2KB

yahoo.com

45.9KB

Atomic

Reusable
my.yahoo.com


21.3KB (18KB + 3KB)

One CSS


We’re not banning semantic classes


Re-evaluate the beneﬁts of the
common approach rather than
adopt it as the de facto tool for
styling web pages.


Break code into the smallest
presentational classes as possible


“Everything is changing too quickly for
commandments that are etched in stone.
We all need to be open to new learnings,
new approaches, new best practices and
we need to be able to share them.
Not rules, tools.”
http://notrulestools.com/


http://bit.ly/atomiccss
@renatoiwa
@thierryk
@StevenRCarlson


ACSS: Rethinking CSS Best Practices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to ACSS: Rethinking CSS Best Practices

Similar to ACSS: Rethinking CSS Best Practices (20)

Recently uploaded

Recently uploaded (20)

ACSS: Rethinking CSS Best Practices