Fork me on GitHub

Easier CSS Coding

Patrick Arlt

Lets looks at some CSS

Some really complex CSS that does some cool stuff.

I write a lot of CSS

Over 25k lines of CSS across

7 Problems with CSS at Scale

  1. Gobal namespace
  2. Dependencies
  3. Dead code elimination
  4. Minfication
  5. Sharing constants
  6. Non-deterministic resolution
  7. Isolation

From React: CSS in JS – NationJS

Problems with CSS at Scale

  1. Everything is a global
  2. No package mangers or modules
  3. Can't can't remove unused code
  4. Can't be minifed efficiently
  5. Can't share common values
  6. Specificity cold war
  7. Can't isolate styles from each other

More CSS Problems…

  • Repetion
  • Browsers
  • Standards

Lets looks at that CSS again

Box Group CSS

Fixing CSS With Tooling

  • Naming conventions
  • Use JavaScript to write CSS
  • Give CSS a modules system
  • Pre/Post Processors
  • Frameworks

Obligatory Quote:

There are only two hard problems in Computer Science: cache invalidation and naming things.

-Phil Karlton

Ways to name things in CSS…

Don't get too caught up in this.

CSS Naming Conventions: Fewer Rules, more Fun

Write CSS In JavaScript

- Everyone using React

The worst things about CSS are the "Cascading" and the "Sheets"

Jed Schmidt - At Brooklyn JS

Write inline styles with JavaScript

``` js var divStyle = { color: 'white', fontSize: '2rem' }; ReactDOM.render( <div style={divStyle}>Hi!</div>, document.body ); ```
``` html <div style="color: white; font-size: 2rem;">Hello World!</div> ```
We already tried this in 1996 when Netscape introduced JavaScript StyleSheets (JSSS).

Mixed Feelings

Solves lots of problems. Causes lots of problems.

The Debate Around “Do We Even Need CSS Anymore?”

CSS Modules!

What if you could import CSS code like you can JavaScript modules?

CSS Modules: Welcome to the Future

A Button with CSS Modules

``` css /* button.css */ .normal { /* all styles for Normal */ } .disabled { /* all styles for Disabled */ } .error { /* all styles for Error */ } .inProgress { /* all styles for In Progress */ ```
``` js /* button.js */ import styles from './button.css'; var button = document.getElementById('myButton'); button.classList.add(styles.normal); ```
``` html <!-- In your HTML --> <button id="myButton" class="button__normal__abc5436"> Processing... </button> ```

CSS Modules Are Awesome!

They solve a lot of our problems. But…

  • Not a formal spec
  • Extra processing tools
  • Very early in development

Pre/Post Processing

Extend the CSS language. Sass, Less, Stylus and PostCSS. Compilers for CSS.

  • Variables to share values
  • Reusable functions
  • Seperate files and imports
  • Logic and operators
  • Inheriance


Massive libraries of prebuilt CSS.

Practical CSS Tools

Pick the problems you want to solve, then use tools that solve those problems.

What I Want…

  • Add structure and logic
  • Reuse and share code
  • Help with the global namespace problem
  • Allow me to organize code
  • Bundle code for browsers
  • Fix browser inconsistancy

A Practical CSS Toolkit

  • Pick a framework
  • Pick some naming conventions
  • Preprocess with Sass
  • Postprocess with PostCSS
  • Bask in glory

Naming convention

We use a loose'ish version of BEM. Works just fine and we dont have to bend over backward to stick to our own conventions.

CSS Naming Conventions: Fewer Rules, more Fun


Adds programming language features to CSS.


Apply transformations to CSS with JavaScript plugins.


Automagically prefix CSS code!

No more -webkit-, -moz-, -ms- ect…

Gulp Tooling Demo

CSS Talks At Dev Summit