Style It is a component for writing plaintext CSS in JavaScript apps. Use the same familiar CSS syntax you already know and love -- now inside of your components.

Proponent of eat your own dog food. If you want to see Style It live head over to Pholder.com, serving thousands daily. Question, issue, or request? Open an issue or reach out on gitter.

SEE MORE »

Installation

Install with npm.

npm install style-it --save

Alternatively, if you are not using npm as your package manager the files can be downloaded directly from the npm content delivery network.

Usage

Style It takes advantage of ES2015 / ES6 specification for Template Literals (previously "template strings") to write plaintext CSS in JavaScript. Use of Template Literals enables multi-line strings, string interpolation, and use of curley brackets / braces to declare CSS rules.

Template Literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes. Learn more about Template Literals on MDN.

Functional syntax

In:

import React from 'react';
import Style from 'style-it';
 
class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro {
        font-size: 40px;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}
 
export default Intro;

Out:

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 40px;
    }
  </style> 
 
  CSS-in-JS made simple -- just Style It.
</p>

JSX syntax

In:

import React from 'react';
import Style from 'style-it';
 
class Intro extends React.Component {
  render() {
    return (
      <Style>
        {`
          .intro {
            font-size: 40px;
          }
        `}
 
        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}
 
export default Intro;

Out:

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 40px;
    }
  </style> 
 
  CSS-in-JS made simple -- just Style It.
</p>

Component with Component Root Node

Let's say we have two components ParentComponent and ChildComponent defined as follows (note the root node in the ParentComponent is another component):

...
class ParentComponent extends Component {
    render() {
        return (
            <ChildComponent>
                <p> Some stuff </p>
            </ChildComponent>
        )
    }
}
...

...
class ChildComponent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}
...

The child component is a typical passthrough component, that takes the props (in this case <p> Some stuff </p>) and renders them.

A core feature of Style It are scopes, you do not have to worry about global CSS name collisions because each CSS rule is scoped to it's own sub-tree (poly-like fill for scoped attribute). To achieve this, a scoping className is added. This works automagically when component root nodes are types like <div>, <span>, <p>, etc. When the root node of a component is another component, this becomes a much more tricky problem because it is not known how deep the component root node nesting will go (e.g., multiple passthrough components composed inside of one another).

For this reason, components which serve as root nodes for other components must have their className attribute set to this.props.className to have the CSS scoping class name properly set (without the scope class name CSS styles will not apply). So the ChildComponent (since it is used as a root node in the ParentComponent) becomes:

...
class ChildComponent extends Component {
    render() {
        return (
            <div className={this.props.className}>
                {this.props.children}
            </div>
        )
    }
}
...

So all we added was an explicit className assignment from props (this snippet className={this.props.className}). Would argue that this is best practices anyway for a component that can be a root node; likely should use the spread operator (e.g., {...this.props}) to cover all your bases and include events a would be user of your component may attach.

If you would like to play with this scenario online, you can open this example in JSFIDDLE.

Additional Usage

JavaScript variables in your CSS

In:

import React from 'react';
import Style from 'style-it';
 
class Intro extends React.Component {
  render() {
    const fontSize = 13;
 
    return Style.it(`
      .intro {
        font-size: ${ fontSize }px;  // ES2015 & ES6 Template Literal string interpolation
      }
      .package {
        color: blue;
      }
      .package:hover {
        color: aqua;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}
 
export default Intro;

Out:

<p class="intro _scoped-1">
  <style type="text/css">
    ._scoped-1.intro {
      font-size: 13px;
    }
    ._scoped-1 .package {
      color: blue;
    }
    ._scoped-1 .package:hover {
      color: aqua;
    }
  </style> 
 
  CSS-in-JS made simple -- just Style It.
</p>

Layout styling

Style your layout without using an external CSS file. Style It makes keeping all of your CSS in the App component hierarchy easy -- from global layout to component specific styles (uses JSX syntax).

In:

import React from 'react';
import Style from 'style-it';
 
class App extends React.Component {
  render() {
    return (
      <div>
        <Style>
          {`
            body {
              font-size: small;
              font-family: arial;
            }
            h1 {
              font-size: large;
            }
            h2 {
              font-size: medium;
            }
            h3 {
              font-size: small;
            }
            a {
              color: blue;
            }
            a:hover {
              color: aqua;
            }
         `}
        </Style>
 
        <header />
        <main />
        <footer />
      </div>
    );
  }
}
 
export default App;

Out:

<div>
  <style type="text/css">
    body {
      font-size: small;
      font-family: arial;
    }
    h1 {
      font-size: large;
    }
    h2 {
      font-size: medium;
    }
    h3 {
      font-size: small;
    }
    a {
      color: blue;
    }
    a:hover {
      color: aqua;
    }
  </style> 
 
  <header></header>
  <main></main>
  <footer></footer>
</div>

More Features

Behind The Scenes (bonus)

How scopes work

To isolate styles Style It iterates over child component prop data and generates a hash that is used as a scoping class. Preference would be to use Math.random() however HTML rendered on the server would not be identical to the HTML rendered on the client. Use of Math.random() would create a server-client mismatch and benefits of the serverside render would be lost. Working within these constraints, Style It collects child component props and hashes them to generate a -- unique as possible -- identifier on client and server. Relative to how iterating through children is historically done, by going to the DOM and reading values, React allows us to perform this operation incredibly fast by leveraging the component hierarchy already held in memory. The hash of the prop data is then used to create a class name (e.g., _scope-472614893) which is automatically prefixed to selectors for you.

Optimization

Firm believer in Don Knuth's Literate Programmer movement: 'the most important function of computer code is to communicate the programmer's intent to a human reader' and that we should not prematurely optimize; optimizations tend to vary and be scenario specific, making code less idiomatic and obtuse, bad for readability and maintainability.

Point being: You probably do not need to worry about this section.

That said, every usage scenario cannot be predicted, so an escape hatch is built into the library. If performance is sluggish this is potentially due to class name scope thrashing. Prop data used to create the class name scope is changing quickly causing the DOM sub-tree to rerender (e.g., live data). To tell Style It to ignore this prop during hash generation mark the prop as internal by prefixing _ to the prop name (e.g, _someProp).

Props like value on <input /> and <textarea /> are automatically ignored, as are props internal to React (they are not idempotent and change from server to client).

License

MIT. Copyright © 2016-present Joshua Robinson.