Rethinking CSS Best Practices
Renato Iwashima
@renatoiwa

Thursday, October 24, 13
The Separation of Concerns

Image by Les_Stockton on

Thursday, October 24, 13
Thursday, October 24, 13
CSS
Javascript
HTML

Thursday, October 24, 13
Thursday, October 24, 13
<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
<...
<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
<...
<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
<...
<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
<...
<div class="my-module">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">Body</div>
<...
Thursday, October 24, 13
Thursday, October 24, 13
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
<div class="mymodule">
<h2 class="headline">Headline</h2>
<h3 class="subhead">Subhead</h3>
<div class="body">
<p>Body text...
.my-module .headline,
.my-module .subsubhead {
border-bottom: 1px dotted #333;
}

Thursday, October 24, 13
.my-module .headline,
.my-module .subsubhead,
.something-else-001 {
border-bottom: 1px dotted #333;
}

Thursday, October 2...
.my-module .headline,
.my-module .subsubhead,
.something-else-001,
.something-else-002 {
border-bottom: 1px dotted #333;
}...
.my-module .headline,
.my-module .subsubhead,
.something-else-001,
.something-else-002,
.something-else-003,
.something-el...
.heading {
border-bottom: 1px dotted #333;
}

Thursday, October 24, 13
.heading

.heading

Thursday, October 24, 13
.heading

.heading

Thursday, October 24, 13
.my-module .headline {
border-bottom-color: red;
}

Thursday, October 24, 13
.my-module .headline {
border-bottom-color: red;
}
.page-1 .my-module .headline {
border-bottom-color: navy;
}

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

Thursday, October 24, 13

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

.my-module .headline {
border-bottom-color: red;
}
.page-1 .my-module .headline {
border-bottom-color: navy;
}
.pa...
Current UI Page Architecture
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer

Thursday, October...
Current UI Page Architecture
Normalize
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer

Thursda...
Current UI Page Architecture
Normalize

Layout
Header

Module 1

Module 2

Module 3

Module 4

Module 5

Module 6

Footer
...
Current UI Page Architecture
Normalize

Layout

Reusable Patterns

Header

Module 1

Module 2

Module 3

Module 4

Module ...
Current UI Page Architecture
Normalize

Layout

Reusable Patterns

Header

Module 1 CSS

Module 1

Module 2

Module 2 CSS
...
Current UI Architecture on Multiple Pages

Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Header

Module ...
Current UI Architecture on Multiple Pages
NORMALIZE

Header

Module 1

Header

Module
2

Module 1

Header

Module
4

Heade...
Current UI Architecture on Multiple Pages
NORMALIZE
REUSABLE PATTERNS

Header

Module 1

Header

Module
2

Module 1

Heade...
Current UI Architecture on Multiple Pages
NORMALIZE
REUSABLE PATTERNS
PAGE SPECIFIC STYLES

PAGE SPECIFIC STYLES

PAGE SPE...
Large Scale Websites Modularity

Poor caching from page to page
Limited reusability of styles
Specificity wars
Contextual s...
Where we want to be
NORMALIZE
REUSABLE PATTERNS
PAGE SPECIFIC STYLES

PAGE SPECIFIC STYLES

PAGE SPECIFIC STYLES

PAGE SPE...
Where we want to be

MODULE 1 CSS
MODULE 2 CSS
PAGE SPECIFIC STYLES
MODULE 3 CSS
Header

MODULE 4 CSS
Module
MODULE
Module...
Semantic Class Names
Thursday, October 24, 13
Other than microformats,
class names are used for presentational
purpose or javascript hooks.

Thursday, October 24, 13
Let’s talk about
Semantic Class Names

Thursday, October 24, 13
se·man·tic
adjective
1. relating to meaning in language or logic.

Thursday, October 24, 13
.title
bold large text

Thursday, October 24, 13
.bold and .large
bold large text

Thursday, October 24, 13
Bootstrap

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

Thursday, October 24, 13
...
Foundation

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

Thursday, October 24, 13

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

Thursday, October 2...
BUT
WHY?
Thursday, October 24, 13
Maintenance
CSS maintenance

Thursday, October 24, 13
SEO & Responsive Web Design
Same HTML: Crawling optimization
AWD: Vary HTTP header
Responsive Page Grid

Thursday, October...
HTML5 specification section on classes
... authors are encouraged to use [class
attribute] values that describe the
nature ...
Nicolas Gallagher
About HTML Semantics Front End Architecture
http://nicolasgallagher.com/about-html-semantics-front-end-a...
...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.

Thursday, October 24, 13
Class names should communicate useful
information to developers

Thursday, October 24, 13
Wilson Page
Building the new financial times web app
http://coding.smashingmagazine.com/2013/05/23/building-the-new-financia...
Components need to be dumb, they can’t know
anything of their context, or the consequences of
any interactions that may oc...
Fruit Classes
.apple_headline {
font-size: 40px;
}
.apple_sub-head {
font-size: 20px;
}
.apple_body {
font-size: 14px;
col...
Reusable
Hard to know what the class is for

Thursday, October 24, 13
Nicole Sullivan
Our Best Practices Are Killing Us
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-ki...
Redundancy
Bloat
Specificity wars

Thursday, October 24, 13
Keep specificity as low as
possible and abstract repeating
visual patterns

Thursday, October 24, 13
Treat code like Lego. Break code into the
smallest little blocks possible.
smashing magazine - @csswizardry (via @stubborn...
Atomic CSS

Image by Alexey Vinokurov on

Thursday, October 24, 13
a·tom·ic
adjective
1. of or forming a single irreducible unit
or component in a larger system

Thursday, October 24, 13
Class names inspired by
Zen Coding (Emmet)

Thursday, October 24, 13
.Fl-start
.Fl-end
.Fl-n
.Cur-p
.Fz-l
.Fz-xl
.Mstart-10

Thursday, October 24, 13

{
{
{
{
{
{
{

float: left;
float: right...
How can your design evolve?

Thursday, October 24, 13
Switching context:
Instead of stylesheets you would
be managing templates.

Thursday, October 24, 13
Node.js and the new web front-end
Nicholas Zakas

Thursday, October 24, 13
Thursday, October 24, 13
<template>

Thursday, October 24, 13
Possibly coming in the future

Thursday, October 24, 13
<details open>
<summary>Timepieces</summary>
<ul>
<li>Sundial</li>
<li>Cuckoo clock</li>
<li>Wristwatch</li>
</ul>
</detai...
details[open]

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

<decorator id="details-open">
<template>
<a id="summary">
&blacktriangl...
What goes into my stylesheet?

Thursday, October 24, 13
Basic rules like floating an element
Helper classes

Thursday, October 24, 13
/**
 * one liner with ellipsis
 * 1. we inherit hyphens:auto from body which would break "Ell" in table cells
 */
.Ell {
m...
Reduces style scope
Reduces stylesheets bloat
Improves performance
Removes dependencies
Allows to share content and assets...
Use Case
Media Object

Thursday, October 24, 13
Conventional

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

Fl

Thur...
3 Column Page Layout

Fl

BFC

Media object?

Thursday, October 24, 13

Fl
Atomic

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

Fl

Thursday, October 24...
Atomic
<div class="Bfc">
<div class="Fl-start">...</div>
<div class="Fl-end">...</div>
<div class="Bfc">...</div>
</div>

...
Atomic

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

Fl

Thursday, O...
Use Case
Hero Unit

Thursday, October 24, 13
Conventional
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
</div>

Thursday, October 24, 13
Atomic
<h1 class="Fz-xl Fw-b">Heading</h1>
<p class="Fz-l Fw-200">Tagline</p>

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

Thursday, October 24,...
CSS bloat vs HTML bloat

Image by NASA Goddard Space Flight Center on

Thursday, October 24, 13
The data needs to live
somewhere

Thursday, October 24, 13
.wrapper vs .bfc

Thursday, October 24, 13
Good gzip compression

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

Thursday, October 24, 13

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

1...
Measurements
Study

Compressed

Uncompressed

News

67.0 KB

267 KB

Sports

61.4 KB

230 KB

ACSS

38.3 KB

154 KB

Thurs...
Atomic vs Inline Styles

Image by MrMeik on

Thursday, October 24, 13
Inline Styles

ACSS

Specificity
1.0.0.0

Specificity
0.0.1.0
Scope
Portability

Verbosity

Thursday, October 24, 13

Abstra...
Real World Results

Thursday, October 24, 13
Conventional
answers.yahoo.com

30.1KB

sports.yahoo.com

67.4KB

omg.yahoo.com

46.2KB

yahoo.com

45.9KB

my.yahoo.com

...
Conventional
answers.yahoo.com

30.1KB

sports.yahoo.com

67.4KB

omg.yahoo.com

46.2KB

yahoo.com

45.9KB

Atomic

Reusab...
One CSS

Thursday, October 24, 13
We’re not banning semantic classes

Thursday, October 24, 13
Re-evaluate the benefits of the
common approach rather than
adopt it as the de facto tool for
styling web pages.

Thursday,...
Break code into the smallest
presentational classes as possible

Thursday, October 24, 13
“Everything is changing too quickly for
commandments that are etched in stone.
We all need to be open to new learnings,
ne...
http://bit.ly/atomiccss
@renatoiwa
@thierryk
@StevenRCarlson

Thursday, October 24, 13
Upcoming SlideShare
Loading in …5
×

ACSS: Rethinking CSS Best Practices

1,816 views
1,577 views

Published on

When it comes to CSS, the "sanctity" of the Separation of Concerns principle (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching, and more. We're introducing a new CSS architecture that we called "Atomic CSS". It challenges best practices to address many of these common issues.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,816
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

ACSS: Rethinking CSS Best Practices

  1. 1. Rethinking CSS Best Practices Renato Iwashima @renatoiwa Thursday, October 24, 13
  2. 2. The Separation of Concerns Image by Les_Stockton on Thursday, October 24, 13
  3. 3. Thursday, October 24, 13
  4. 4. CSS Javascript HTML Thursday, October 24, 13
  5. 5. Thursday, October 24, 13
  6. 6. <div class="my-module"> <h2 class="headline">Headline</h2> <h3 class="subhead">Subhead</h3> <div class="body">Body</div> </div> Thursday, October 24, 13
  7. 7. <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; } Thursday, October 24, 13
  8. 8. <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; } Thursday, October 24, 13
  9. 9. <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; } Thursday, October 24, 13
  10. 10. <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; } Thursday, October 24, 13
  11. 11. Thursday, October 24, 13
  12. 12. Thursday, October 24, 13
  13. 13. <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; } Thursday, October 24, 13
  14. 14. <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; } Thursday, October 24, 13
  15. 15. <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; } Thursday, October 24, 13
  16. 16. <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; } Thursday, October 24, 13
  17. 17. <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; } Thursday, October 24, 13 Growth
  18. 18. <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; } 0 Thursday, October 24, 13
  19. 19. .my-module .headline, .my-module .subsubhead { border-bottom: 1px dotted #333; } Thursday, October 24, 13
  20. 20. .my-module .headline, .my-module .subsubhead, .something-else-001 { border-bottom: 1px dotted #333; } Thursday, October 24, 13
  21. 21. .my-module .headline, .my-module .subsubhead, .something-else-001, .something-else-002 { border-bottom: 1px dotted #333; } Thursday, October 24, 13
  22. 22. .my-module .headline, .my-module .subsubhead, .something-else-001, .something-else-002, .something-else-003, .something-else-004, .something-else-005, .something-else-006, .something-else-007, .something-else-008, .something-else-009, .something-else-010, .something-else-011, .something-else-012 { border-bottom: 1px dotted #333; } Thursday, October 24, 13
  23. 23. .heading { border-bottom: 1px dotted #333; } Thursday, October 24, 13
  24. 24. .heading .heading Thursday, October 24, 13
  25. 25. .heading .heading Thursday, October 24, 13
  26. 26. .my-module .headline { border-bottom-color: red; } Thursday, October 24, 13
  27. 27. .my-module .headline { border-bottom-color: red; } .page-1 .my-module .headline { border-bottom-color: navy; } Thursday, October 24, 13
  28. 28. .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; } Thursday, October 24, 13
  29. 29. Growth Thursday, October 24, 13 .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; }
  30. 30. Growth .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; } Specificity Thursday, October 24, 13
  31. 31. Current UI Page Architecture Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
  32. 32. Current UI Page Architecture Normalize Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
  33. 33. Current UI Page Architecture Normalize Layout Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
  34. 34. Current UI Page Architecture Normalize Layout Reusable Patterns Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
  35. 35. Current UI Page Architecture 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 Thursday, October 24, 13
  36. 36. 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 Thursday, October 24, 13 Module 6 Module 5 Module 3 Module 6 Module 6 Footer Footer Footer
  37. 37. Current UI Architecture on Multiple Pages 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 Thursday, October 24, 13 Module 6 Module 5 Module 3 Module 6 Module 6 Footer Footer Footer
  38. 38. Current UI Architecture on Multiple Pages 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 Thursday, October 24, 13 Module 6 Module 5 Module 3 Module 6 Module 6 Footer Footer Footer
  39. 39. Current UI Architecture on Multiple Pages NORMALIZE REUSABLE PATTERNS PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES 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 Thursday, October 24, 13 Module 6 Module 5 Module 3 Module 6 Module 6 Footer Footer Footer
  40. 40. Large Scale Websites Modularity Poor caching from page to page Limited reusability of styles Specificity wars Contextual selectors used to scope styles Bloat! Thursday, October 24, 13
  41. 41. Where we want to be NORMALIZE REUSABLE PATTERNS PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES 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 Thursday, October 24, 13 Module 6 Module 5 Module 3 Module 6 Module 6 Footer Footer Footer
  42. 42. Where we want to be MODULE 1 CSS MODULE 2 CSS PAGE SPECIFIC STYLES 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 PAGE SPECIFIC STYLES PAGE SPECIFIC STYLES MODULE 5 CSS MODULE 6 CSS Header MODULE 6 CSS Module 1 Footer Thursday, October 24, 13 MODULE 2 CSS PAGE SPECIFIC STYLES 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
  43. 43. Semantic Class Names Thursday, October 24, 13
  44. 44. Other than microformats, class names are used for presentational purpose or javascript hooks. Thursday, October 24, 13
  45. 45. Let’s talk about Semantic Class Names Thursday, October 24, 13
  46. 46. se·man·tic adjective 1. relating to meaning in language or logic. Thursday, October 24, 13
  47. 47. .title bold large text Thursday, October 24, 13
  48. 48. .bold and .large bold large text Thursday, October 24, 13
  49. 49. Bootstrap .text-left .text-right .text-center .pull-right .pull-left .affix .invisible .hidden Thursday, October 24, 13 { { { { { { { { text-align: left; } text-align: right; } text-align: center; } float: right !important; } float: left !important; } position: fixed; } visibility: hidden; } display: none !important;}
  50. 50. Foundation .text-left .text-right .text-center .text-justify .left .right .hide Thursday, October 24, 13 { { { { { { { text-align: left !important; text-align: right !important; text-align: center !important; text-align: justify !important; float: left !important; float: right !important; display: none; } } } } } } }
  51. 51. But we usually stop short since best practices is to style elements using classes related to content. Thursday, October 24, 13
  52. 52. BUT WHY? Thursday, October 24, 13
  53. 53. Maintenance CSS maintenance Thursday, October 24, 13
  54. 54. SEO & Responsive Web Design Same HTML: Crawling optimization AWD: Vary HTTP header Responsive Page Grid Thursday, October 24, 13
  55. 55. HTML5 specification 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. Thursday, October 24, 13
  56. 56. Nicolas Gallagher About HTML Semantics Front End Architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Thursday, October 24, 13
  57. 57. ...there is no inherent reason to do this. In fact, it’s often a hindrance when working on large websites or applications. Thursday, October 24, 13
  58. 58. The most reusable components are those with class names that are independent of the content. Thursday, October 24, 13
  59. 59. Class names should communicate useful information to developers Thursday, October 24, 13
  60. 60. Wilson Page Building the new financial times web app http://coding.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/ Thursday, October 24, 13
  61. 61. Components need to be dumb, they can’t know anything of their context, or the consequences of any interactions that may occur within them. Thursday, October 24, 13
  62. 62. 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> Thursday, October 24, 13
  63. 63. Reusable Hard to know what the class is for Thursday, October 24, 13
  64. 64. Nicole Sullivan Our Best Practices Are Killing Us http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ Thursday, October 24, 13
  65. 65. Redundancy Bloat Specificity wars Thursday, October 24, 13
  66. 66. Keep specificity as low as possible and abstract repeating visual patterns Thursday, October 24, 13
  67. 67. Treat code like Lego. Break code into the smallest little blocks possible. smashing magazine - @csswizardry (via @stubbornella) #btconf Thursday, October 24, 13
  68. 68. Atomic CSS Image by Alexey Vinokurov on Thursday, October 24, 13
  69. 69. a·tom·ic adjective 1. of or forming a single irreducible unit or component in a larger system Thursday, October 24, 13
  70. 70. Class names inspired by Zen Coding (Emmet) Thursday, October 24, 13
  71. 71. .Fl-start .Fl-end .Fl-n .Cur-p .Fz-l .Fz-xl .Mstart-10 Thursday, October 24, 13 { { { { { { { float: left; float: right; float: none; cursor: pointer; font-size: 18px; font-size: 20px; margin-left: 10px; } } } } } } } /* wOOt */
  72. 72. How can your design evolve? Thursday, October 24, 13
  73. 73. Switching context: Instead of stylesheets you would be managing templates. Thursday, October 24, 13
  74. 74. Node.js and the new web front-end Nicholas Zakas Thursday, October 24, 13
  75. 75. Thursday, October 24, 13
  76. 76. <template> Thursday, October 24, 13
  77. 77. Possibly coming in the future Thursday, October 24, 13
  78. 78. <details open> <summary>Timepieces</summary> <ul> <li>Sundial</li> <li>Cuckoo clock</li> <li>Wristwatch</li> </ul> </details> Thursday, October 24, 13 <details open> <a id="summary"> &blacktriangledown; <summary>Timepieces</summary> </a> <ul> <li>Sundial</li> <li>Cuckoo clock</li> <li>Wristwatch</li> </ul> </details>
  79. 79. details[open] { decorator: url(#details-open); } <decorator id="details-open"> <template> <a id="summary"> &blacktriangledown; <content select="summary"></content> </a> <content></content> </template> </decorator> Thursday, October 24, 13
  80. 80. What goes into my stylesheet? Thursday, October 24, 13
  81. 81. Basic rules like floating an element Helper classes Thursday, October 24, 13
  82. 82. /**  * 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; } Thursday, October 24, 13
  83. 83. 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 Thursday, October 24, 13
  84. 84. Use Case Media Object Thursday, October 24, 13
  85. 85. Conventional <div class="media"> <a class="pull-left" href="#">...</a> <div class="media-body">...</div> </div> Fl Thursday, October 24, 13 BFC
  86. 86. 3 Column Page Layout Fl BFC Media object? Thursday, October 24, 13 Fl
  87. 87. Atomic <div class="Bfc"> <a class="Fl-start" href="#">...</a> <div class="Bfc">...</div> </div> Fl Thursday, October 24, 13 BFC
  88. 88. Atomic <div class="Bfc"> <div class="Fl-start">...</div> <div class="Fl-end">...</div> <div class="Bfc">...</div> </div> Fl Thursday, October 24, 13 BFC Fl
  89. 89. Atomic <div class="Bfc"> <div class="Fl-start">...</div> <div class="Fl-end">...</div> </div> <p>...</p> Fl Thursday, October 24, 13 Fl
  90. 90. Use Case Hero Unit Thursday, October 24, 13
  91. 91. Conventional <div class="hero-unit"> <h1>Heading</h1> <p>Tagline</p> </div> Thursday, October 24, 13
  92. 92. Atomic <h1 class="Fz-xl Fw-b">Heading</h1> <p class="Fz-l Fw-200">Tagline</p> Thursday, October 24, 13
  93. 93. Reusable It has a real meaning Just by looking at the markup you already know how it will look like Thursday, October 24, 13
  94. 94. CSS bloat vs HTML bloat Image by NASA Goddard Space Flight Center on Thursday, October 24, 13
  95. 95. The data needs to live somewhere Thursday, October 24, 13
  96. 96. .wrapper vs .bfc Thursday, October 24, 13
  97. 97. Good gzip compression .M-1 .M-2 .M-4 .M-6 .M-8 Thursday, October 24, 13 {margin: {margin: {margin: {margin: {margin: 1px;} 2px;} 4px;} 6px;} 8px;}
  98. 98. Measurements Study Compressed Uncompressed News 67.0 KB 267 KB Sports 61.4 KB 230 KB ACSS 38.3 KB 154 KB Thursday, October 24, 13
  99. 99. Atomic vs Inline Styles Image by MrMeik on Thursday, October 24, 13
  100. 100. Inline Styles ACSS Specificity 1.0.0.0 Specificity 0.0.1.0 Scope Portability Verbosity Thursday, October 24, 13 Abstraction Mapping
  101. 101. Real World Results Thursday, October 24, 13
  102. 102. 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 Thursday, October 24, 13
  103. 103. 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 Thursday, October 24, 13 21.3KB (18KB + 3KB)
  104. 104. One CSS Thursday, October 24, 13
  105. 105. We’re not banning semantic classes Thursday, October 24, 13
  106. 106. Re-evaluate the benefits of the common approach rather than adopt it as the de facto tool for styling web pages. Thursday, October 24, 13
  107. 107. Break code into the smallest presentational classes as possible Thursday, October 24, 13
  108. 108. “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/ Thursday, October 24, 13
  109. 109. http://bit.ly/atomiccss @renatoiwa @thierryk @StevenRCarlson Thursday, October 24, 13

×