A rehashed version of http://www.slideshare.net/bensmithett/presentation-38906546 that I presented at MelbCSS

1. Styling
Components
with JavaScript
@bensmithett

2. I already gave this talk at MelbJS
Sorry if you're sitting through it again!

3. Warning:
This talk is about writing CSS...

4. IN

5. JAVASCRIPT

8. Explore some new ideas and
challenge best practices

9. CSS is not lacking Best Practices™
Sass • Less • Stylus • Myth • Autoprefixer
OOCSS • BEM • SMACSS • SUIT • AMCSS
No IDs • No inline styles • Use meaningful class
names • Mobile first • Repetition is OK •
Repetition is the devil • Avoid complex selectors
• Use @extends • Don't use @extends • Don't
write CSS in JavaScript

10. COMPONENTS!

11. The Profile component:
views/
profile.html
stylesheets/
profile.css
javascripts/
profile.js

12. structure
<div class="profile">
<img class="profile__avatar" src="{{user.avatar}}">
<strong>{{user.username}}</strong>
</div>

13. style
.profile {
border: 1px solid #ddd;
overflow: hidden;
}
.profile__avatar {
float: left;
margin-right: 10px;
}

14. behaviour
$(".profile").on("click", function(){
alert("hi");
});

15. Best practice:
Separate HTML, CSS & JS

16. Why?
Why is separating HTML, CSS & JS a best
practice?

17. When we were building pages
CSS classes loosely coupled to HTML
.important {
color: red;
font-weight: bold;
}
JS behaviour loosely coupled to HTML
$(".foo").fancyParallaxSlider()

18. Now...
BEM Blocks, SMACSS Modules, SUIT
Components
Tightly couple styles to a very particular HTML
structure
Backbone Views, Angular Directives, Ember &
React Components
Tightly couple JS behaviour to a very particular
HTML structure

19. views/
profile.html
stylesheets/
profile.css
javascripts/
profile.js

20. components/
profile/
profile.html
profile.css
profile.js

21. Component:
A tightly coupled little bundle of HTML,
CSS & JS

23. React is a library for building components

24. A React component
• Describes the HTML structure given a
particular application state
• Reacts to user events (click, dragenter etc)
that originate within the component

25. <div class="profile">
<img class="profile__avatar" src="{{user.avatar}}">
<strong>{{user.username}}</strong>
</div>

26. $(".profile").on("click", function(){
alert("hi");
});

27. var Profile = React.createClass({
render: function () {
return(
<div className="profile" onClick={this.handleClick}>
<img className="profile__avatar"
src={this.props.avatarUrl} />
<strong>{this.props.username}</strong>
</div>
);
},
handleClick: function () {
alert("hi");
}
});

28. components/
profile/
profile.html
profile.css
profile.js

29. components/
profile/
profile.jsx
profile.css

30. The only real connection: a class name
// JS
render: function () {
return (
<div className="profile">
// ...
</div>
)
}
/* CSS */
.profile
border: 1px solid #ddd
It's a crappy, vague connection.

31. Also, our CSS builds are a bit backwards
/* app.scss */
@import vendor/Normalize.css;
@import base;
@import components/header;
@import components/profile;
@import components/footer;

32. Can't we do better?

33. What if our build process automatically
built a stylesheet based only on the JS
components we actually use?

34. Webpack
// ComponentA.js
require("./componentA.css");
// ComponentB.js
require("./componentB.css");
// Javascript build generates app.css:
// .component-a { ... }
// .component-b { ... }

35. components/
profile/
profile.jsx
profile.css

36. React can do inline styles
var profileStyles = {
border: "1px solid #ddd",
overflow: "hidden"
};
var Profile = React.createClass({
render: function () {
return <div style={profileStyles} />;
}
});
<!-- DOM generated by React -->
<div style="border: 1px solid #ddd; overflow: hidden"><div>

37. NOBODY LIKES
INLINE STYLES

38. What we really want:
• Declare styles in the component file, using
JavaScript, like we do with inline styles
• Build process that:
• converts those styles to a CSS class
• bundles up all generated CSS classes into a
shiny CSS file
• JS component magically knows which class
name to use for a given element

39. react-style + webpack
• github.com/SanderSpies/react-style
• andreypopp.com/posts/2014-08-06-react-style.
html
• webpack.github.io

40. var Profile = React.createClass({
styles: ReactStyle({
backgroundColor: "green",
border: "1px solid #ddd"
}),
render: function () {
return <div styles={this.styles()} />
}
})

41. /* app.css generated by react-style & webpack */
.a {
background-color: green;
border: 1px solid #ddd;
}
<!-- DOM generated by React -->
<div class="a">
...
</div>

42. Best practice:
Use meaningful class
names & a naming
convention like BEM or
SUIT

43. Why?
We need a sensible class name that we can
follow across seperate HTML, CSS & JS files
Nope. All that stuff is in one file now.

44. var Profile = React.createClass({
styles: ReactStyle({
backgroundColor: "green",
border: "1px solid #ddd"
}),
render: function () {
return <div styles={this.styles()} />
}
})

45. Why?
We want to be able to inspect an element in the
browser dev tools & see which component it
belongs to.
Yeah, this one is valid.
But we can still automate it!

46. Automatically generate a BEM class name
className = path.basename(fileName).split('.')[0].toLowerCase() +
'__' +
styleName;
or a SUIT class name
className = path.basename(fileName).split('.')[0] +
'-' +
styleName.charAt(0).toUpperCase() +
styleName.slice(1);

47. CSS class naming conventions are a project
setting, not an inherent property of the
component.
• Dev: BEM class names for easy debugging
• Prod: Tiny minified class names

48. I <3 Sass

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

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

51. JS already has lots of Real Programming
Things™
• Variables
• Functions
• Arrays & Objects
• Loops
• Maths
• String manipulation
• Dependency management

52. Things we can do in JS
instead of a preprocessor
Warning: everything beyond here is totally pseudocode that may or
may not actually work

53. Example: Color variables
var colors = require("color_palette");
var styles = {
color: colors["primary"]
}
var Profile = React.createClass({
render: function () {
return <div style={styles} />;
}
});

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

55. 2015 HIPSTER PREPROCESSOR
JAVASCRIPT?!

56. Give it 5 minutes

57. the end :)
@bensmithett