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

Javascript

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

Growth

<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

.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

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/

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

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

Conventional

Fl BFC Fl

Media object?

3 Column Page Layout

Atomic

Fl BFC Fl

Atomic

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

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://bit.ly/atomiccss

@renatoiwa@thierryk

@StevenRCarlson

ACSS: Rethinking CSS Best Practices

Technology

Transcript of ACSS: Rethinking CSS Best Practices

ACSS September Newsletter 2010

Dr. Ron Iphofen AcSS Independent Consultant, formerly Director of Postgraduate Studies, Health Sciences, Bangor University Dr. Ron Iphofen AcSS Independent.

AVIATION COMMUNICATION & SURVEILLANCE SYSTEMS, LLC (ACSS)

ACSS Strategic Plan 2016-2020 - ASEAN · ACSS Strategic Plan 2016-2020 As adopted at the Fourth Session of the ACSS Committee Nay Pyi Taw, Myanmar, 15-16 October 2014 A. Introduction

Peter Ramsden AcSS Pole manager URBACT Inclusion …cohesionsociale.wallonie.be/sites/default/files/Peter_Ramsden2.pdf · Peter Ramsden AcSS Pole manager URBACT Inclusion and governance

Controlling for confounders through approximate sufficiencyrina/aCSS/slides.pdf · Co-su cient sampling (CSS) Co-su cient sampling Sample copies X~(m) ˘(distrib. of X jS(X)), where

ACSS - ASEAN | ONE VISION ONE IDENTITY ONE ......ACSS – ASEAN Community Statistical System 2014 Jakarta: ASEAN Secretariat, December 2014 310.5931 1. Statistics – Cooperation 2.

ACSS ACSEE AGEN 2016 - Official Conference Programme

Etat Officiel Des MutationsATHLETISME...ACSS 19 1 BENCHOUCHE MOUKRAM 12.01.02 CSCS 19 ACSS 19 Favorable Favorable 2 SALHI TADJEDDINE 08.01.01 CSCS 19 ACSS 19 Favorable HD 3 BOUKRAA

Installation Instructions - AFL · INSTALLATION INSTRUCTIONS INS-ACA091 Installation Instructions HiTemp Jumper Connectors for ACSS and ACSS/TW Conductors 1 . Measure back from each

3000-2-ACSS Small and Medium Enterprise (SME)

Might and Magic 7 Walkthrough (ACSS)

Acss 2011 report_volume_1_national

Acss Voc2 Key

ACSS Spresentation

Technical Evaluation Package Advantages of Southwire ACSS ...

ACIS-ACSS Credential Guide V1

GUIDE FOR INSTALLATION OF ACSS & ACSS/TW CONDUCTOR · PDF fileFigure 1. Comparison of ACSS and ACSS/TW conductors. Although similar in appearance, ACSS and ACSR are mechanically and

Chapter 8 Cascading Style Sheets (CSS). Agenda Definition of a CSS style Types of CSS Styles CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS.

Manual de Identidade Visual - ACSS - Estudo Da Marca