thinking outside the box model: scaling css in large real-time applications
TRANSCRIPT
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