Both traditional stylesheets and inline styles have their place within React applications. By using them harmoniously you can have the best of both worlds.
What is style anyway?
The first thing to realize is that “style” is actually a few related concepts. I like to break it down into 2 main categories: presentational styles and behavioral styles.
Presentational styles describe the appearance of your application as a whole, and are rarely specific to a particular component. Instead, presentational styles define how elements look in relation to each other, and play the main role in the overall look-and-feel of the application. They are also always static. Base font styles, the color palette, and your grid system are all examples of presentational styling.
Behavioral styles describe how individual elements of your application look and behave in a given state. They are dynamic, requiring logic to determine. For example, if an element changes background colors when some state in the app is reached, then that is a behavioral style.
Prefer traditional stylesheets for presentational styling
For all the presentational styling needs of your application, stick with simple, traditional CSS stylesheets.
Additionally, some CSS features such as media queries are at best painful and at worst impossible to do with inline styles alone.
Prefer inline styles for behavioral styling
This makes conditional state classes totally unnecessary. No more “is-complete” or “has-ratings” type of class names anymore.
Behavioral styles can and should be unit tested. This isn’t perfect though, even though your assertion that a particular style is applied passes, the component still may not render exactly the way you want it in the browser.
Here is a working example of a
Nav component whose behavior is to slide out from the left side of the screen when opened. The dynamic state is
sliderMenuVisible, which changes the
left css property, triggering an animation. Notice the use of the
nav class name for presentational styling concerns too.
But, I have not seen this as a huge problem yet, and I don’t think this would be a hard problem to solve if it gets un-maintainable in your project.