Styling components with JavaScript

Styling
Components
with JavaScript
@bensmithett

Warning
» Not a tutorial for use in production!
» I'm not even using any of this outside
late night hacks
But there are some interesting new ideas.
Let's explore them & challenge CSS best
practices!

Components are awesome!
Nobody builds pages any more.
Here's an example Profile component:
components/
Profile/
index.hbs
index.css
index.js

HTML Template
<div class="profile">
<img class="profile__avatar" src="{{avatarUrl}}.jpg" />
<strong>{{username}}</strong>
</div>
Style
.profile {
border: 1px solid #ddd;
overflow: hidden;
}
.profile__avatar {
float: left;
margin-right: 10px;
}

Behaviour
var Profile = function (el) {
el.addEventListener("click", function () {
console.log("hai!");
});
this.el = el;
this.tmpl = Handlebars.compile(someTemplateString);
};
Profile.prototype.render = function (state) {
this.el.innerHTML = this.tmpl(state);
};

Styling components with JavaScript

React combines HTML structure & behaviour
var React = require("react");
var Profile = React.createClass({
handleClick: function () {
console.log("hai");
},
render: function () {
return (
<img class="profile__avatar" src="{this.props.avatarUrl}.jpg"
onClick={this.handleClick} />
<strong>{this.props.username}</strong>
</div>
);
}
});
module.exports = Profile;

That's a big dirty lie
The component's CSS is one of its
concerns, but it's off in some random
other file.
components/
Profile/
index.css
index.jsx

The only connection: a class name
// JS
return (
// ...
</div>
)
}
/* CSS */
.profile
overflow: hidden;

Most things
» JS Dependencies are explicitly required
» HTML structure is right there in the
file
» JS behaviour is right there in the file
CSS
» In another file, the classes might have
the same name ¯_()_/¯
It's a crappy, vague connection.

CSS builds are a bit backwards
//app.scss
@import vendor/Normalize.css;
@import base;
@import components/Header;
@import components/Profile;
@import components/Footer;
You need to know which bits of CSS your
app requires. Lame.

What if our JS build automatically
created a stylesheet based only on the
components we use?
// app.js
var Profile = require(./components/Profile);
var Header = require(./components/Header);
var Footer = require(./components/Footer);
// app.css
// Somehow...
// components/Profile/index.css
// components/Header/index.css
// components/Footer/index.css
// ... end up here?

var React = require(react);
require(./index.css);
return (
div class=profile /
);
}
});

// app.js
var Profile = require(./components/Profile);
var Header = require(./components/Header);
var Footer = require(./components/Footer);
// app.css generated by webpack
.profile { ... }
.profile__avatar { ... }
.header { ... }
.footer { ... }

Hooray!
CSS is just another dependency we can
require() in our component

Hooray?
components/
Profile/
index.css
index.jsx
» Still working across 2 files
» Need to maintain class names across 2
files
... still a bit lame.

React can do inline styles
// Profile/index.js
styles: {
border: 1px solid #ddd,
overflow: hidden
},
return(
div style={this.styles} /
);
}
});
!-- DOM generated by React --
div style=border: 1px solid #ddd; overflow: hidden;
/div

Nobody likes inline
styles though

What we really want:
» Declare styles in the component, like
we do with inline styles
» Build process that...
» converts them to a CSS class
» spits out a shiny, auto-generated
app.css
» component knows to use that class
name

React-style does that!
» https://github.com/SanderSpies/react-style
» http://andreypopp.com/posts/2014-08-06-
react-style.html
(with a little help from webpack)

!-- DOM generated by React --
div class=a
...
/div
// app.css generated by React-style Webpack
.a {
background-color: green;
}

Demo
Compiling with default compressed class
names

Do you even need
a CSS naming
convention?

not really...
» Styles are tightly coupled part of the
component, not a separate thing
» CSS class naming conventions are a
project setting, not an inherent
property of the component
» Dev: BEM class names for easy
debugging
» Prod: Tiny compressed class names

I 3 Sass
$red: #f00;
$grid-columns: 12;
$base-font-size: 16px;
@function px-to-em($px, $base: $base-font-size) {
@return ($px / $base) * 1em;
}
%placeholder {
color: $red;
}
.thing {
@extend %placeholder;
padding: 10px;
}

What is a Preprocessor?
A language that helps us generate blocks
of key:value pairs.
selector {
property: value;
other-property: other-value;
}

What is a Preprocessor?
A language that helps us generate blocks
of key:value pairs.
selector = {
property: value,
other-property: other-value
};
JavaScript can do that!

JS already has lots of Real Programming
Language Things TM
» Variables
» Functions
» Arrays Objects
» Loops
» Maths
» String manipulation
» Dependency management

Warning!
Total pseudocode, nothing past this point
actually works

Example: color variables
var colors = require(./color_palette);
styles: ReactStyle(function () {
return {
color: colors[hotPink],
};
}),
return(
div styles={this.styles()} /
);
}
});

Example: Generate a grid
var gridColumns = 12;
var styles = {};
for (var i = 1; i = gridColumns; i++) {
var width = (i / gridColumns) * 100;
styles[span- + i] = ReactStyle(function () {
return {
float: left,
width: width + %
}
});
}
var GridColumn = React.createClass({
styles: styles,
var columns = span- + this.props.columns;
return(
div styles={this.styles[columns]()} /
);
}
});

2015 Hipster Preprocessor
JavaScript?!

The end :)
@bensmithett
https://github.com/bensmithett/react-style-example
https://github.com/SanderSpies/react-style
https://github.com/chenglou/rcss
https://github.com/hedgerwang/react-styles
https://github.com/elierotenberg/react-css

Styling components with JavaScript

Related slideshows

More Related Content

Styling components with JavaScript