thinking outside the box model: scaling css in large real-time applications

THINKING OUTSIDE THEBOX MODEL

SCALING CSS IN LARGE REAL-TIME APPLICATIONSMatt Fairbrass, Lab49 | @matt_d_rat

$: WHOIS MATT FAIRBRASSUX software engineer at Lab49Originally from London, now living here in Sydney.I AngularJS, SCSS, Node

#SYDCSS @matt_d_rat GitHub LinkedIn

DECEMBER 17, 1996

Image © Lab49. All rights reserved

CSS AS A LANGUAGE WASN'T DESIGNED TOBE USED IN THIS WAY

WE NEED TO RE-THINK HOWWE ARCHITECT CSS

Linting tools Pre-processing tools OOCSS Language

methodologies BEM SASS/SCSS UX

workflow Component DrivenDesign SUIT CSS Testing Image Diffs Dependency

management File structure Device testing

COMPONENT DRIVEN DESIGN

Component-driven design at its simplest isseperation of concerns. Components are desgned

with their own logic, with one specific purpose,and only one purpose.

To separate business logic in self-containedcomponents requires focus on the interactions

between components. In other words, you haveto think about right interfaces.

Image © Lab49. All rights reserved

Image © Lab49. All rights reserved

SUIT CSS.ComponentName {}.ComponentName--modifierName {}.ComponentName-descendentName {}.ComponentName.is-stateOfComponent {}

.u-utilityName {}

Image © Lab49. All rights reserved

.Button {}

.Button--secondary {}

.Button--block {}

.Button-icon {}

.Accordion {}

.Accordion-header {}

.Accordion-header.is-collapsed {}

.Accordion-panel.is-collapsed {}

.Badge {}

.Badge--round {}

.Badge--positive {}

.Badge--negative {}

.Badge--warning {}

.Input {}

.Input--withIcon {}

.Input--block {}

.ContactsPanel {}

.ContactsPanel-searchInput {}

.ContactsPanel-accordion {}

.ContactsPanel-chatButton {}

.ContactsPanel-unreadCount {}

BENEFITS OF SUIT CSSForces us to consider seperation of concernsProvides semantic meaning to CSSReduces coupling to the structure of the DOMParents do not mutate child stylingProvides us with a psuedo encapsulation, styles do not cascadeComponents are re-usable across the platform ecosystemComponents are testable in isolation

CONCLUSIONEncapsulation is essential in order for code to be able to scale

The Shadow DOM will eventually provide thisUntil then, use language design methodologies

Follow component driven design:Components should do only one thingDefine good interfaces for inter-component interaction

The sum of the parts is greater than the whole:Build from the bottom-up, not top-down as with traditionalweb-page design

THANK YOUhttp://mattfairbrass.com/2015/06/04/sydcss-scaling-css