# Styling TodoMVC Application

## Styling Approach

Traditional pattern in organizing web pages was to split them up into markup (HTML), styling (CSS) and logic (JavaScript) files.\
With React, there has been a change in that mindset.\
The idea is to push styling to the component level. The best practices are still being figured out, but different patterns exist.

We will be using one of the available libraries called Radium.

## What is Radium?

> Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
>
> Radium unlocks the power of React & inline styling by enabling support for CSS pseudo selectors, media queries, vendor-prefixing, and much more through a simple interface.
>
> \-- [Radium website](https://formidable.com/open-source/radium/)

## Prerequisites

First, we will have to install some additional libraries to our project.

Let's make the following changes:

```bash
diff --git a/package.json b/package.json
index ab8b985..ea783a3 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   "dependencies": {
     "express": "^4.15.4",
     "immutable": "^3.8.1",
+    "radium": "^0.19.4",
     "react": "^15.6.1",
     "react-redux": "^5.0.5",
     "redux": "^3.7.2",
@@ -45,6 +46,8 @@
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-transform-decorators": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
(END)
```

```bash
diff --git a/.babelrc b/.babelrc
index 9b7d435..90ff9fc 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0", "react"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
 }
(END)
```

For styling to work, we'll need to annotate our classes using @Radium decorator, and for that we need decorators plugins.

Let's now install the new dependencies:

```bash
$ npm install
```

And commit the changes:

```bash
$ git add .
$ git commit -m 'added Radium and decorators'
```