We Work with

Our Open Source

IE 8

SVG

CSS4

What Next?

1. Problem

Old JS — Global

window.jquery = …;
window.BigBigPage = …;

New JS — Components

var Logo = require('../logo');

var Header = function () {
    return <nav>
      <Logo></Logo>
    </nav>;
};

Global CSS :-(

* {
    box-sizing: border-box;
}
.title {
    font-size: 30px;
}

JS

CSS

2. Solution

.window {
  …
}
.name {
  background: red;
}

.popup {
  …
}
.name {
  border-color: blue;
}

.window {
  …
}
.name {
  background: red;
}

.popup {
  …
}
.name {
  border-color: blue;
}

← Conflict →

Prefix?

.prefix__name {
    …
}

windows.prefix = {
  name: …
}

BEM

Old JS

We Need:

(function () {

  // Isolation
  var name = …;

})();

postcss-modules

.name {
}

.Logo_name_6gj5 {
}

{
  name: "Logo_name_6gj5"
}

var s = require('./style.css.json');

<div className={ s.name }>
</div>

Template

Isolated selectors

postcss([
  require('postcss-modules')
]);

<Header>
  <Logo />
</Header>

<Footer>
  <Logo />
</Footer>

<Header>
  <Logo />
</Header>

<Footer>
  <Logo />
</Footer>

.header {
  line-height: 1.4;
}

.footer {
  line-height: 1;
}

.logo {
}

.logo {
}

.header {
  line-height: 1.4;
}

.footer {
  line-height: 1;
}

.logo {

}

.logo {

}

line-height: 1.4;

line-height: 1;

Conflict

Inherited properties

body
  .header
​    .logo
        

{ line-height: 1.4; }
        

line-height: 1.4
        

line-height: 1.4
        

<Logo />

Project 1

Project 2

/* Reset */
* {
  padding: 0;
}

/* Reset */
* {
  box-sizing: border-box;
}

Local Reset

h1, h2, …, div {
    /* Reset */
}

.header {
}
.logo {
}

.header, .logo {
    /* Reset */
}

.header {
}
.logo {
}

Global Reset

body
  .header
​    .logo
        

line-height: 1.4
        

line-height: default
        

line-height: default

Isolated

postcss-autoreset

require('postcss-autoreset')({
  reset: {
    all:       'initial',
    font:      'inherit',
    boxSizing: 'border-box'
  }
})

.foo {
  all: initial;
}

W3C one line reset

postcss-cssnext supports it

postcss([
  require('postcss-modules'),
  require('postcss-autoreset')({
    reset: {
      all:       'initial',
      font:      'inherit',
      boxSizing: 'border-box'
    }
  }),
  require('postcss-cssnext')
]);

3. Why?

Widgets

<link rel="stylesheet"
      src="/💩💩💩.css">
<link rel="stylesheet"
      src="https://a.com/widget.css">

<div class="name">
  <our-widget></our-widget>
</div>

Big Company

Less Tests

Questions

twitter.com/ andreysitnik

twitter.com/ postcss