Title Text
CSS Isolation
Andrey Sitnik, Evil Martians
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
PostCSS Isolation Short
By Andrey Sitnik
