• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ACSS: Rethinking CSS Best Practices
 

ACSS: Rethinking CSS Best Practices

on

  • 346 views

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

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.

Statistics

Views

Total Views
346
Views on SlideShare
346
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    ACSS: Rethinking CSS Best Practices ACSS: Rethinking CSS Best Practices Presentation Transcript

    • 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> Thursday, October 24, 13
    • <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
    • <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
    • <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
    • <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
    • 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</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
    • <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
    • <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
    • <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
    • <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
    • <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
    • .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 24, 13
    • .my-module .headline, .my-module .subsubhead, .something-else-001, .something-else-002 { border-bottom: 1px dotted #333; } Thursday, October 24, 13
    • .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
    • .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, 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; } Thursday, October 24, 13
    • 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; }
    • 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
    • Current UI Page Architecture Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
    • Current UI Page Architecture Normalize Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
    • Current UI Page Architecture Normalize Layout Header Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 Footer Thursday, October 24, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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 { { { { { { { { 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 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; } } } } } } }
    • But we usually stop short since best practices is to style elements using classes related to content. Thursday, October 24, 13
    • 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 24, 13
    • 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
    • Nicolas Gallagher About HTML Semantics Front End Architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Thursday, October 24, 13
    • ...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
    • 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-financial-times-web-app/ Thursday, October 24, 13
    • 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
    • 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
    • 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-killing-us/ Thursday, October 24, 13
    • 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 @stubbornella) #btconf Thursday, October 24, 13
    • 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; float: none; cursor: pointer; font-size: 18px; font-size: 20px; margin-left: 10px; } } } } } } } /* wOOt */
    • 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> </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>
    • 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
    • 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 { 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
    • 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
    • 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 Thursday, October 24, 13 BFC
    • 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, 13 BFC
    • 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
    • Atomic <div class="Bfc"> <div class="Fl-start">...</div> <div class="Fl-end">...</div> </div> <p>...</p> Fl Thursday, October 24, 13 Fl
    • 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, 13
    • 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: 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 Thursday, October 24, 13
    • 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 Abstraction Mapping
    • 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 21.3KB (18KB + 3KB) Atomic Thursday, October 24, 13
    • 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)
    • 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, October 24, 13
    • 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, new approaches, new best practices and we need to be able to share them. Not rules, tools.” http://notrulestools.com/ Thursday, October 24, 13
    • http://bit.ly/atomiccss @renatoiwa @thierryk @StevenRCarlson Thursday, October 24, 13