React.js和Radium.js-使React样式本质上具有全局性，但需要用户输入吗？

Question

I am just starting to learn Radium , so please overlook my ignorance. If there is anything great about CSS files , it is that you link to them once in your main APP component and forget them, they are cached and can be used in all your components simply.

But, you cannot connect any interactivity between them and any user input.

Here is a simple snippet I played around with based on the sample provided on the Radium github :

import React, { Component, PropTypes } from 'react';
import Radium from 'radium';

const squareStyles = {
  both: {
    background: 'black',
    border: 'solid 1px white',
    float: 'left',
    height: 100,
    width: 100
  },
  one: {
    ':hover': {
      background: 'green'
    }
  },
  two: {
    ':hover': {
      background: 'red'
    }
  }
};

---

@Radium
export default class APP extends Component {

 ......................

  render() {
    // final result is yellow
    squareStyles.one[':hover'].background = 'yellow';
    return (
        <div>
          <div key="one" style={ [squareStyles.both, squareStyles.one] } />
          <div key="two" style={ [squareStyles.both, squareStyles.two] } />
          <div style={ { clear: 'both' } }/>
        </div>
    );
  }
}

Even though the squareStyles.one[':hover'].background was preset to green, user input made it yellow instead. Great!

But what if I need squareStyles in several components? I do not want repetitive code defining squareStyles in each of them.

Question:

1. With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?

2. If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?

Thanks

---

Update:

1. I put square styles in a js file encapsulated under module.exports.
2. I added const styles = require('../styles/styles'); in lieu of the local squareStyles object.
3. I prefaced all objects of 'squareStyles.' to 'styles.squareStyles'.

Everything works, so ...

I assume I will have to add that required file to every component. Yes?

1. Will the file be cached?

2. If I convert all my css files this way to take advantage of user interactivity, will my app become slow?

3. Am I even going about this correctly?

Again thanks.

Answer 1

1. With Radium, or any 3rd party add-on, is there a way I can have a styles.js file global in nature much like css?

Yeah sure you can use Webpack to automatically make certain things global, however you don't want to do this. The idea of requiring / important is to not only explicitly manage dependencies, but also reduce the footprint of your site. If you eventually want to get into things like code splitting and loading only the necessary parts of an application up front, you'll want to require things manually.

2. If not, who would even consider inline styles when it would just lead to repetitive code that one of the benefits of css takes care of?

Inline code CAN lead to repetitive code, and CSS can also leave to repetitive code. One of the things CSS allowed developers to do, was to be lazy and write classes and not have to worry about if there was a class that already addressed the majority of the visual representation they wanted. It's the age old idea that you can use the best language and technology stack and still write bad code.

The thing about React, is that it allows you to create reusable components. You write a couple of reusable component, you import them in another component, then you're only having to write the inline styles once, same as css. You can argue that importing components is more tedious, however there are plenty of problems with css that you'll be getting around by taking this approach. See here: https://speakerdeck.com/vjeux/react-css-in-js

3. Will the file be cached?

No. Browsers are built to support CSS and cache them. But you have to ask yourself: is the different negligible? For instance more than ever, people are more concerned about users hitting your site for the first, which is where the bounce rate is the highest. You can argue for a cached css file, however if this css file represents the entirety of your application, it will most certainly take longer than inline styles from a couple of react components. Moreover, mounting additional components with additional css may be trivial enough load wise that it wouldn't matter. I'm still measuring this stuff too but what's important to note is that you should think outside the box in terms of what css has preached to developers all these years. There may be a better solution... try it out for yourself performance wise and report back!

4. If I convert all my css files this way to take advantage of user interactivity, will my app become slow?

https://github.com/FormidableLabs/radium/issues/58

Word on the street is that the performance hit you would get is negligible. Again, put together a small test and see if the performance works for you.

5. Am I even going about this correctly?

A lot of new methods take time for them to catch adoption with developers, and when they do usually you'll see different patterns come out. The pattern you're using is definitely an option. You may see that option refined, changed or even scrapped (similar to the path of flux if you've been paying attention that project and all it's refinements / spinoffs). I'd say to encapsulate the css into as many reusable components as possible, then use a file like yours as a way to reuse chunks of style that wouldn't necessarily be a component (for instance a piece of code that adds text shadow and box shadow to an element / component), and then lastly leverage one off inline styles for things that aren't patterns or won't be used.