React.js inline style best practices

Question

I'm aware that you can specify styles within React classes, like this:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Should I be aiming to do all styling this way, and have no styles at all specified in my CSS file?

Or should I avoid inline styles completely?

It seems odd and messy to do a little bit of both - two places would need to be checked when tweaking styling.

Answer 1

You can use inline styles but you will have some limitations if you are using them in all of your stylings, some known limitations are you can't use CSS pseudo selectors and media queries in there.

You can use Radium https://github.com/FormidableLabs/radium to solve this but still, I feel has the project grows its gonna get cumbersome.

I would recommend using CSS modules https://github.com/css-modules/css-modules

using CSS Modules you will have the freedom of writing CSS in CSS file and don't have to worry about the naming clashes, it will be taken care by CSS Modules.

An advantage of this method is that it gives you styling functionality to the specific component. This will create much more maintainable code and readable project architecture for the next developer to work on your project.

Answer 2

James K Nelson in his letter "Why You Shouldn’t Style React Components With JavaScript" states that there is no actually need of using inline styles with its downsides. His statement is that old boring css with less/scss is the best solution. The part of his thesises in favor to css:

• extendable externally
• leverable (inline styles overleap everything)
• designer-friendly

Answer 3

It's really depends on how big your application is, if you wanna use bundlers like webpack and bundle CSS and JS together in the build and how you wanna mange your application flow! At the end of day, depends on your situation, you can make decision!

My preference for organising files in big projects are separating CSS and JS files, it could be easier to share, easier for UI people to just go through CSS files, also much neater file organising for the whole application!

Always think this way, make sure in developing phase everything are where they should be, named properly and be easy for other developers to find things...

I personally mix them depends on my need, for example... Try to use external css, but if needed React will accept style as well, you need to pass it as an object with key value, something like this below:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Answer 4

The main purpose of the style attribute is for dynamic, state based styles. For example, you could have a width style on a progress bar based on some state, or the position or visibility based on something else.

Styles in JS impose the limitation that the application can't provide custom styling for a reusable component. This is perfectly acceptable in the aforementioned situations, but not when you change the visible characteristics, especially color.

Answer 5

Styling in JSX is very similar to styling in HTML.

HTML Case:

div style="background-color: red; color: white"

JSX Case:

div style={{ backgroundColor: 'red', color: 'white' }}

Answer 6

The problem with inline styles is Content Security Policies (CSP) are becoming more common, which do not allow it. Therefore, I recommend avoiding inline styles completely.

Update: To explain further, CSP are HTTP headers sent by the server that restrict what content can appear on the page. It is simply a further mitigation that can be applied to a server to stop an attacker from doing something naughty if the developer code the site poorly.

The purpose of most of these restrictions is to stop XSS (cross-site scripting) attacks. XSS is where an attacker figures out a way to include his own javascript on your page (for example, if I make my username bob<SCRIPT>alert("hello")</SCRIPT> and then post a comment, and you visit the page, it shouldn't show an alert). Developers should deny the ability to have a user add content like this to the site, but just in case they made a mistake, then CSP blocks the page from loading if it finds any script> tags.

CSP are just an extra level of protection for developers to ensure if they made a mistake, that an attacker can't cause problems to visitors to that site.

So that all is XSS, but what if the attacker can't include <script> tags but can include <style> tags or include a style= parameter on a tag? Then he might be able to change the look of the site in such a way that you're tricked into clicking the wrong button, or some other problem. This is much less of a concern, but still something to avoid, and CSP does that for you.

A good resource for testing a site for CSP is https://securityheaders.io/

You can read more about CSP at: http://www.html5rocks.com/en/tutorials/security/content-security-policy/