/ React

All Javascript, All The Time

This week I had an exciting epiphany about a particular part of my workflow that I’ll admit is not my favorite, styling.

While working on a project in React I found it really simple to create simple objects in my component file to inject as inline styles and get some basic layout done quickly. This was wonderful as it allowed me to stay in file and keep working on the composition and functionality. However, there came a point at which the collection of components I was working on was finished and a more thorough styling was in order. As I sat and strategized how to collect and organize my existing style pieces into a coherent CSS file it occurred to me that I don’t need a CSS file at all!

What I decided to do, and rather enjoyed, was to build a hierarchy of objects in .js files, import these objects into my component files and apply them inline. It worked great. Let me show you how it worked. First I built an object of base styles that would be built upon:

const baseStyles = {
  box: {
    // base styles for all boxes
  }
};
export default baseStyles;

I imported those base styles into my component specific styles file and, making liberal use of the spread operator, added to those base styles what I would need for the specific component.

import baseStyles from './baseStyles';

const someComponentStyles = {
  box: {
    ...baseStyles.box
    // extra styels for some specific components box
  }
};
export default someComponentStyles;

Then importing just this component specific object of styles I applied the final set of styles directly to the appropriate pieces of my component.

import React from 'react';
import styels from '../../styles/someComponentStyles';

class someComponent extends React.Component{
  render() {
    return (
      <div style={ styles.box }>
        <p>My fancy box</p>
      </div>
    );
  }
}
export default someComponent;

I couldn’t believe how simple this was and I loved the ability to take my own the fly layout pieces and build upon them when the time came. More than that I was ecstatic that I now didn’t have to add another tool to my build process. Now my styles can be bundled and minified right along with the rest of my Javascript!

Now of course I was not the first person to think of this. In a short search after the fact I found quite a bit of lively discussion on the topic. Some in favor of the idea, some very much against it. And, this being Javascript, there are libraries to be found that promise to add to the functionality of the approach. As to whether this is a long term best practice the jury is still out for me, but I can say that I enjoy when I can: