CSS has evolved and changed much since its initial release 18 years ago. Its introduction ushered in a new era of separation of concerns keeping document content and its presentation separate from one another. Since then we have enjoyed a myriad of advancements in the language as it tries to keep pace with the ever changing design landscape of the web. As the types of applications we build become ever more complex, how we write and scale CSS becomes a real challenge. In this talk, Matt looks at the techniques he uses at Lab49 to scale CSS in building real-time foreign exchange banking platforms. Matt Fairbrass is a 27 year old UX software engineer from London, England. For the past two and a half years, he has been working for Lab49, a strategy, design and technology consulting firm that creates advanced solutions for the world’s leading investment banks, asset managers and exchanges.

1. THINKING OUTSIDE THE
BOX MODEL
SCALING CSS IN LARGE REAL-TIME APPLICATIONS
MattFairbrass,Lab49|@matt_d_rat

2. $: WHOIS MATT FAIRBRASS
UX software engineer at Lab49
Originally from London, now living here in Sydney.
I AngularJS, SCSS, Node

3. #SYDCSS
 @matt_d_rat
 GitHub
 LinkedIn

4. DECEMBER 17, 1996

8. Image©Lab49.Allrightsreserved

9. CSS AS A LANGUAGE WASN'T DESIGNED TO
BE USED IN THIS WAY

11. WE NEED TO RE-THINK HOW
WE ARCHITECT CSS

12. Lintingtools Pre-processing tools OOCSS Language
methodologies BEM SASS/SCSS UX
workflow Component Driven
Design SUITCSS Testing ImageDiffs Dependency
management File structure Device testing

13. COMPONENT DRIVEN DESIGN

14. Component-driven design at its simplest is
seperation of concerns. Components are desgned
with their own logic, with one specific purpose,
and only one purpose.
To separate business logic in self-contained
components requires focus on the interactions
between components. In other words, you have
to think about right interfaces.

15. Image©Lab49.Allrightsreserved

16. Image©Lab49.Allrightsreserved

17. SUIT CSS
.ComponentName{}
.ComponentName--modifierName{}
.ComponentName-descendentName{}
.ComponentName.is-stateOfComponent{}
.u-utilityName{}

18. Image©Lab49.Allrightsreserved

19. .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{}

20. BENEFITS OF SUIT CSS
Forces us to consider seperation of concerns
Provides semantic meaning to CSS
Reduces coupling to the structure of the DOM
Parents do not mutate child styling
Provides us with a psuedo encapsulation, styles do not cascade
Components are re-usable across the platform ecosystem
Components are testable in isolation

21. CONCLUSION
Encapsulation is essential in order for code to be able to scale
The Shadow DOM will eventually provide this
Until then, use language design methodologies
Follow component driven design:
Components should do only one thing
Define 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 traditional
web-page design

22. THANK YOU
http://mattfairbrass.com/2015/06/04/sydcss-scaling-css