Easier CSS Coding

Patrick Arlt

http://bit.ly/1LujHp4

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 https://developers.arcgis.com

7 Problems with CSS at Scale

Gobal namespace
Dependencies
Dead code elimination
Minfication
Sharing constants
Non-deterministic resolution
Isolation

From React: CSS in JS – NationJS

Problems with CSS at Scale

Everything is a global
No package mangers or modules
Can't can't remove unused code
Can't be minifed efficiently
Can't share common values
Specificity cold war
Can't isolate styles from each other

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  <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

Frameworks

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.