# React - css/style/className(s)

**URL:** https://forum.kirupa.com/t/react-css-style-classname-s/635623
**Category:** web dev
**Created:** [December 5, 2016, 11:33am UTC](https://forum.kirupa.com/t/react-css-style-classname-s/635623 "2016-12-05T11:33:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![gNeandr](https://avatars.discourse-cdn.com/v4/letter/g/bcef8e/32.png) [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [December 5, 2016, 11:33am UTC](https://forum.kirupa.com/t/react-css-style-classname-s/635623/1 "2016-12-05T11:33:09Z")

</div>

With a project started at an university for the design React was chosen. Functionally it was a great move, but I see it’s not a ‘pure’ React approach, mainly the styling. First pure CSS was used alongside the React components etc.  
A move to use style={…} was easy (also not finished), but how about className?

That is pointing to CSS definition and can be like this: className=“buttons remove”. This makes it easy to get a specific ‘buttons’ rendering as also for others like ‘add’ or ‘change’ buttons etc.

Is it recommended to move those over to the React style={…} also? And how can it be written so not every buttons needs the whole css definition? Maybe the spread operator {…props}?

How about joined className to be found with [classNames with React](https://github.com/JedWatson/classnames/blob/master/README.md#user-content-usage-with-reactjs)?

---

<div class="post-metadata">

### Author: ![alltom](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alltom/32/7274_2.png) [@alltom](https://forum.kirupa.com/u/alltom)
#### Post date: [December 16, 2016, 4:25pm UTC](https://forum.kirupa.com/t/react-css-style-classname-s/635623/2 "2016-12-16T16:25:21Z")

</div>

Is there consensus on which way is better yet? 😃 Last I heard, there were lots of people who liked passing `style`s around as JavaScript objects, but also lots of people who liked using `className` with plain old CSS files. Last I looked, most of the `style` folks started as a result of [this talk](http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html) (whose comments have links to libraries that help) and the `className` folks use projects like [React Shadow](https://github.com/Wildhoney/ReactShadow) to address the same concerns.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 17, 2016, 3:42am UTC](https://forum.kirupa.com/t/react-css-style-classname-s/635623/3 "2016-12-17T03:42:41Z")

</div>

Unless you really have a pressing need to keep your styles inside your components, use CSS all the way. You get cascading and a bunch of simple things that are much MUCH nicer than React’s approach.

😛

---

<div class="post-metadata">

### Author: ![alltom](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alltom/32/7274_2.png) [@alltom](https://forum.kirupa.com/u/alltom)
#### Post date: [January 3, 2017, 12:20am UTC](https://forum.kirupa.com/t/react-css-style-classname-s/635623/4 "2017-01-03T00:20:16Z")

</div>

> [@kirupa](#):
>
> Unless you really have a pressing need to keep your styles inside your components, use CSS all the way. You get cascading and a bunch of simple things that are much MUCH nicer than React’s approach.

Well, that talk I linked to describes the pressing reasons that are inherent to using CSS the way you recommend. In my experience, it doesn’t scale to complex sites. :\ But hey, it does work for the first few thousand lines.
