acss: rethinking css best practices

Renato Iwashima@renatoiwa

Rethinking CSS Best Practices

Thursday, October 24, 13

The Separation of Concerns

Image by Les_Stockton on


HTML

Javascript

CSS


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



.my-module {! background: whiteSmoke;! padding: 10px;}




.my-module .headline { font-size: 20px; font-weight: bold; border-bottom: 1px dotted #333;}





.my-module .subhead { font-size: 16px; font-weight: 200;}





.my-module .subhead { font-size: 16px; font-weight: 200;}

.my-module .body { padding: 10px;}


.my-module {! background: whiteSmoke;! padding: 10px;}.my-module .headline { font-size: 20px; font-weight: bold; border-bottom: 1px dotted #333;}.my-module .subhead { font-size: 16px; font-weight: 200;}.my-module .body { padding: 10px;}

<div class="mymodule"> <h2 class="headline">Headline</h2> <h3 class="subhead">Subhead</h3> <div class="body"> <p>Body text</p> </div></div>


.my-module {! background: whiteSmoke;! padding: 10px;}.my-module .headline { font-size: 20px; font-weight: bold; border-bottom: 1px dotted #333;}.my-module .subhead { font-size: 16px; font-weight: 200;}.my-module .body { padding: 10px;}

<div class="mymodule"> <h2 class="headline">Headline</h2> <h3 class="subhead">Subhead</h3> <div class="body"> <p>Body text</p>

<h4 class="subsubhead">Subsubhead</h4><p>Body text</p>

</div></div>


.my-module {! background: whiteSmoke;! padding: 10px;}.my-module .headline { font-size: 20px; font-weight: bold; border-bottom: 1px dotted #333;}.my-module .subhead { font-size: 16px; font-weight: 200;}.my-module .body { padding: 10px;}.my-module .subsubhead { border-bottom: 1px dotted #333;}



</div></div>


.my-module {! background: whiteSmoke;! padding: 10px;}.my-module .headline { font-size: 20px; font-weight: bold; border-bottom: 1px dotted #333;}.my-module .subhead { font-size: 16px; font-weight: 200;}.my-module .body { padding: 10px;}.my-module .subsubhead { border-bottom: 1px dotted #333;}



</div></div>

Growth


0

<div class="mymodule"> <h2 class="headline">Headline</h2> <h3 class="subhead">Subhead</h3> <div class="body"> <p>Body text</p> <h4 class="subsubhead">Subsubhead</h4> <p>Body text</p> </div></div>

.mymodule {! background: whiteSmoke;! 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 { border-bottom: 1px dotted #333;}


.my-module .headline,

.my-module .subsubhead { border-bottom: 1px dotted #333;}



.my-module .subsubhead,

.something-else-001 { border-bottom: 1px dotted #333;}




.something-else-001,



.heading { border-bottom: 1px dotted #333;}


.heading

.heading


.my-module .headline { border-bottom-color: red;}


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



.page-2 .my-module .headline { border-bottom-color: orange;}




Growth




Specificity

Growth


Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Current UI Page Architecture


Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Normalize

Footer



Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Normalize Layout

Footer



Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Normalize Layout Reusable Patterns

Footer



Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Module 1 CSS

Normalize Layout Reusable Patterns

Module 3 CSS

Module 5 CSS

Module 2 CSS

Module 4 CSS

Module 6 CSS

Footer



Current UI Architecture on Multiple Pages

Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Header

Module 1 Module 4

Module 6Module 5

Footer

Header

Module 1

Module 6

Module 5

Footer

Header

Module 1

Module 2

Module 6

Module 3

Footer


NORMALIZE


Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Header

Module 1 Module 4

Module 6Module 5

Footer

Header

Module 1

Module 6

Module 5

Footer

Header

Module 1

Module 2

Module 6

Module 3

Footer


REUSABLE PATTERNS

NORMALIZE


Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Header

Module 1 Module 4

Module 6Module 5

Footer

Header

Module 1

Module 6

Module 5

Footer

Header

Module 1

Module 2

Module 6

Module 3

Footer


REUSABLE PATTERNS

NORMALIZE


Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Header

Module 1 Module 4

Module 6Module 5

Footer

Header

Module 1

Module 6

Module 5

Footer

Header

Module 1

Module 2

Module 6

Module 3

Footer

MODULE 1 CSS

PAGE SPECIFIC STYLES

MODULE 2 CSS

MODULE 3 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 6 CSS


MODULE 1 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 6 CSS


MODULE 1 CSS

MODULE 5 CSS

MODULE 6 CSS


MODULE 1 CSS

MODULE 2 CSS

MODULE 3 CSS

MODULE 6 CSS


Poor caching from page to pageLimited reusability of stylesSpecificity warsContextual selectors used to scope stylesBloat!

Large Scale Websites Modularity


Where we want to be

Header

Module 1 Module 2

Module 4

Module 6

Module 3

Module 5

Footer

Header

Module 1 Module 4

Module 6Module 5

Footer

Header

Module 1

Module 6

Module 5

Footer

Header

Module 1

Module 2

Module 6

Module 3

Footer

MODULE 1 CSS

MODULE 2 CSS

MODULE 3 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 6 CSS

MODULE 1 CSS

MODULE 4 CSS

MODULE 5 CSS

MODULE 6 CSS

MODULE 1 CSS

MODULE 5 CSS

MODULE 6 CSS

REUSABLE PATTERNS

NORMALIZE

PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES

MODULE 1 CSS

MODULE 2 CSS

MODULE 3 CSS

MODULE 6 CSS


Semantic Class Names


Other than microformats,class names are used for presentational

purpose or javascript hooks.


Let’s talk aboutSemantic Class Names


se·man·ticadjective

1. relating to meaning in language or logic.


.titlebold large text


.bold and .largebold large text


.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.pull-right { float: right !important; }

.pull-left { float: left !important; }

.affix { position: fixed; }

.invisible { visibility: hidden; }

.hidden { display: none !important;}

Bootstrap


.text-left { text-align: left !important; }

.text-right { text-align: right !important; }

.text-center { text-align: center !important; }

.text-justify { text-align: justify !important; }

.left { float: left !important; }

.right { float: right !important; }

.hide { display: none; }

Foundation


But we usually stop short since best practices is to

style elements using classes related to content.


BUT WHY?


CSS maintenance

Maintenance


Same HTML: Crawling optimizationAWD: Vary HTTP header

Responsive Page Grid

SEO & Responsive Web Design


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

HTML5 specification section on classes


Nicolas Gallagher

About HTML Semantics Front End Architecturehttp://nicolasgallagher.com/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 financial times web apphttp://coding.smashingmagazine.com/2013/05/23/building-the-new-financial-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.


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

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

Fruit Classes


ReusableHard to know what the class is for


Nicole Sullivan

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


http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

RedundancyBloatSpecificity wars


Keep specificity 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·icadjective

1. of or forming a single irreducible unit or component in a larger system


Class names inspired by Zen Coding (Emmet)


.Fl-start { float: left; }

.Fl-end { float: right; }

.Fl-n { float: none; }

.Cur-p { cursor: pointer; }

.Fz-l { font-size: 18px; }

.Fz-xl { font-size: 20px; }

.Mstart-10 { 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-endNicholas 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>


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

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


What goes into my stylesheet?


Basic rules like floating an elementHelper 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


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

FlBFC

Conventional


Fl BFC Fl

Media object?

3 Column Page Layout


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

FlBFC

Atomic


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

Fl BFC Fl

Atomic


Atomic

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

Fl Fl


Use Case

Hero Unit


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

Conventional


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

Atomic


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


.M-1 {margin: 1px;}

.M-2 {margin: 2px;}

.M-4 {margin: 4px;}

.M-6 {margin: 6px;}

.M-8 {margin: 8px;}

Good gzip compression


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


Specificity1.0.0.0

Verbosity

Scope

Portability

Specificity0.0.1.0

Abstraction

Mapping

Inline Styles ACSS


Real World Results


answers.yahoo.com 30.1KB

sports.yahoo.com 67.4KB

omg.yahoo.com 46.2KB

yahoo.com 45.9KB

Conventional

Atomic

my.yahoo.com 21.3KB (18KB + 3KB)


answers.yahoo.com 30.1KB

sports.yahoo.com 67.4KB

omg.yahoo.com 46.2KB

yahoo.com 45.9KB

Conventional

Atomic

my.yahoo.com 21.3KB (18KB + 3KB)

Reusable


One CSS


We’re not banning semantic classes


Re-evaluate the benefits 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://notrulestools.com

http://notrulestools.com

http://bit.ly/atomiccss

@renatoiwa@thierryk

@StevenRCarlson




acss: rethinking css best practices

Technology

px fontweight

bold border

css javascript htmlthursday

separation of concernsimage

stockton onthursday