Sass Central Nervous Systems

[lemonmade]

Sass Central Nervous Systems

Type of Presentation

• [x] Standard Length Talk (ideally, or...)
• [x] Lightning Talk
• [ ] Workshop
• [ ] Moderated Discussion

  Description

As a stylesheet grows in size and scope, new code inevitably starts stomping on the toes of code that's already there. At Shopify, some of our more inelegant styles start to behave like flailing limbs, causing far more damage than whatever problems it purports to solve. Components start stacking in the wrong order, colors that aren't part of the styleguide leak into the codebase, spacing becomes inconsistent, and so on.

What we want is a central nervous system to keep our stylesheet in line, to keep all the limbs we add moving in tune (in this analogy, our stylesheet is a many-limbed creature, not merely a simple biped like ourselves). What we need, then, is a set of central utilities that manage core, shared concerns so that individual stylesheets can draw on these instead of counting on each one of those stylesheets to behave themselves. Utilities that provide a simple API for ensuring consistency even as the number of limbs multiples.

Thankfully, Sass provides many excellent tools, most notably Maps, Mixins, Functions, and @content directives, which enable just these kinds of expressive utilities.

Here are some of the things I'd love to chat about on this topic (this is a mixture of things we do at Shopify to manage our extremely large codebase/ large number of contributors, and things I have done in open source and other personal projects):

• Ensuring conformance to design and style guides by providing centralized maps and associated "getters" for colors, font sizes, and defaults (spacing, border radius, etc).
• Managing stacking contexts by providing a centralized z-index utility that lets you add stacking contexts per component and using those contexts in an expressive, self-documenting way.
• Providing centralized breakpoint management to let components use provide component-specific rules for meaningful breakpoints and to enable common size-related behaviours (hide, show, linear-ize, etc) with mixins.
• Creating a set of utility functions and mixins to solve common problems and make users of those utilities more self-documenting.
• For components that are used by other components, building public APIs to more cleanly and clearly manage those associations.

  Speaker Info

• Name : Chris Sauve
• Location : Ottawa, Ontario, Canada
• Contact : chris.sauve@shopify.com

  More Info

  Social Media:

• Twitter : @_lemonmade
• GitHub : lemonmade
• Url(s) : Lemon design (my personal site)

  Bio:

Chris is a relative newcomer to the world of design and development. Three years ago, he became enamoured with the joy of solving complex programming problems and left his accounting career to pursue one in front-end development. Now, he spends his days working as a front-end developer at Shopify, and his nights playing board games, ultimate, and building on open-source projects both big and small (including bigfoot, a tool for building beautiful, responsive popovers for footnotes, and an as-yet-unreleased automated pattern library generator).

Photo:

---

Thanks for your consideration!

[misscs]

Clever title. :+1: proposal; really clear and as an attendee, it makes me feel like I'll be walking away with a lot of practical, applicable knowledge.

Thanks for submitting!