Saw this earlier today: https://github.com/rstacruz/rscss
.search-form { > .submit {} }
which generates this:
.search-form > .submit {}
which can lead to some performance issues :)
That's why I suggest the non-nesting approach
The selector ".search-form .submit" has 2 levels if specificity. What I suggest is using 1 level of specificity like ".search-form__submit"
Nesting is guilty here because of the ease it is to use it wrongly and create selectors with high levels of specificity
tl;dr browsers read css property right-to-left. the more specificity a selector has, the more DOM lookup the browser needs to do.