Andrey Sitnik, Evil Martians
a {
<%= include clickable %>
color: <%= $link-color %>;
}
gulp.task('css', () => {
let postcss = require('gulp-postcss');
return gulp.src('src/*.css')
.pipe( postcss([ plugin1, plugin2 ]) )
.pipe( gulp.desc('build/') );
});
To overcome older preprocessors' limits:
postcss([
require('autoprefixer')({
browsers: 'last 2 version'
}),
require('postcss-cssnext'),
require('precss')
])
.icon {
top: center;
}
@use postcss-center;
.icon {
top: center;
}
@use
: lost, postcss-center, postcss-circleprecss
: Sass-like featurescssnext
: polyfills for “CSS 4”oldie
: IE 8 supportvar moment = require('moment');
logo/
logo.js
logo.css
logo.svg
header/
header.js
header.css
logo.css
header.css
.name {
color: black;
}
.name {
color: gray;
}
import styles from './logo.css';
class Logo extends React.Component {
render() {
return <div className={ styles.name }>We</div>;
}
}
CSS Modules:
BEM
<Header>
color: white
<Logo>
background: white
</Logo>
</Header>
* {
box-sizing: border-box;
}
div {
margin-top: 10px;
}
.logo {
color: black;
}
.logo--big {
width: 200px;
}
.logo {
all: initial;
color: black;
}
.logo--big {
width: 200px;
}
.logo {
all: initial;
}
.logo {
color: black;
background: white;
box-sizing: content-box;
line-height: normal;
text-shadow: none;
vertical-align: baseline;
white-space: normal;
postcss-autoreset
postcss-initial