I am currently learning React and Redux. I have forked a boilerplate, and currently I am looking through all of the code to see how it fits together.

While scanning through some React Component files I found something very interesting! When setting `className` for many of the elements the syntax they use differs. The first time they use the following syntax:

```
<span className={classes['counter--green']}>
    ...
</span>

```

Then this syntax:

```
<button className='btn btn-default'>
    ...
</button>

```

And from there on out they use the following:

```
<h2 className={classes.counterContainer}>
    ...
</h2>

```

At the top of the file they import `classes` with the following:

```
import classes from './Counter.scss'

```

So simply my question is, **why are there three different syntax for className, and which one is correct**?