Should I default to styling each element with CSSModules or are there some cases where CSS child selectors are better?

I'm using react and styling components with bootstrap-sass and css-modules. When I want to style something, should I always put a style for each element like

<div className={styles.styleDiv}>
  <form className={styles.styleForm}>
    <input className={styles.styleInput></input>
  </form>
</div>

.styleDiv {
  /* code */
}

.styleForm {
  /* code */
}

.styleInput {
  /* code */
}

or should I use css child selectors like

<div className={styles.styleDiv}>
  <form className={styles.styleForm}>
    <input></input>
  </form>
</div>

.styleDiv {
  /* code */
}

.styleForm {
  /* code */

  & > input {
    /* code */
  }
}

or does it depend case by base?