Easier CSS Coding – Patrick Arlt

View Github Repository Open presentation in a new window

patrickarlt

See all presentation from patrickarlt

Easier CSS Coding – Patrick Arlt

0 0

css-tooling-dev-summit-2016

Short talk on popular CSS tooling options as a part of the Modern Front-End Web Development training at Esri Developer Summit in March 2016.

On Github patrickarlt / css-tooling-dev-summit-2016

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

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

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.

CSS Naming Conventions: Fewer Rules, more Fun

SASS

Adds programming language features to CSS.

PostCSS

Apply transformations to CSS with JavaScript plugins.

Autoprefixer

Automagically prefix CSS code!

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

Gulp Tooling Demo

CSS Talks At Dev Summit