title: Best way to design React.js components without CSS
body: <p>I'm building a library of my components with React.js. For some reasons I don't want to use CSS for styling. Instead of it, I'm using JSON notation style, like</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "some-class": {
      "color": "#755755"
    },
  
    "some-class:hover": {
      "background": "#CCC"
    }
  }
  </code></pre>
  
  <p>By deisgn, React recommends keep components as stateless as possible, but for such conditions as <code>:hover</code> or <code>:active</code> I use <code>onMouseOver</code> and <code>onMouseOut</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>/**
   * Mouse over handler
   * @return {Void}
   */
  onMouseOver: function() {
      this.setState({
          style: extend(
              {}, 
              this.state.style, 
              style['mdui-btn-' + this.props.type + ':hover']
          )
      });
  },
  
  /**
   * Mouse out handler
   * @return {Void}
   */
  onMouseOut: function() {
      this.setState({
          style: this.computeStyle()
      });
  },
  </code></pre>
  
  <p>I assume that if I want to avoid using CSS I could use this behaviour. Is it a bad idea or not?</p>