style guidelines

**basic rules**

- Top level className in the stylus file == top level className in the component
- They live in the same folder
- camelCase everything
- Child elements start with top-level module name separated by a hyphen ,
  no matter how deeply they are nested
  - please only use hyphens for this
- modifiers can be named however, but should be used with chain selector `&.modifier`

**example**

``components/AddTask/taskItem.styl``

```css

.taskItem
  ..

  .taskItem-body
    ..

  .taskItem-date
    ...
    
    &.modifier

```

``components/AddTask/TaskItem.js``


```javascript

const TaskItem = (
  <div className="taskItem">
    <div className="taskItem-body">
       <div className="taskItem-date modifier"></div>
    </div>
  </div>
)

```