Home » What is Devsigner » Sessions » Form Submission: Submit A Session

CSS That Scales with React

Slides and resources

This round-table will cover with a presentation of problems and solutions to scaling css I encountered while working on Marketo's new Mercury UI css framework. At the same time we'll discuss problems others encountered and how they solved them.

Techniques and technologies to be touched upon are include:

- Modular JSX
- Factory patterns for themeing
- react transitions group
- classnames npm package
- Application CSS modules
- Simple PostCSS configuration
- Babel-plugins to warn on CSS Modules errors,
- Slotted components in React a fork of the https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Propo...

Session takeaways: 

1. Styling is hard but there are methods to make it easier.

2. Compose, slot and reuse to minimize your development time.

3. You don't ever have to do "!important".

Edward Irby
Edward Irby

Hi I'm Edward Irby. I'm the design integrator for Marketo's UI R&D team working on the new Mercury framework for our platform. My daily task amount to the following.
+ Coordinating with UX team to maintain design consistency and implementation
+ Authoring CSS framework for Mercury UI team
+ Building reusable components for the Mercury Framework