Your first solution is recommended BEM best practice, so I would stick with that.
In fact, don't just take my word for it ;). Here's a quote taken from one of the guys who is working on the BEM methodology over at Yandex:
"BEM methodology doesn't recommend to use elements within elements in class names. You don't need to resemble DOM structure in naming. Having one level structure makes refactoring much easier."
— Vladimir Grinenko, Yandex
Thanks for the question Cody!
Your first solution is recommended BEM best practice, so I would stick with that.
In fact, don't just take my word for it ;). Here's a quote taken from one of the guys who is working on the BEM methodology over at Yandex:
"BEM methodology doesn't recommend to use elements within elements in class names. You don't need to resemble DOM structure in naming. Having one level structure makes refactoring much easier."
— Vladimir Grinenko, Yandex
I actually wrote a full blog post already answering your question:
scalablecss.com/bem-nesting-grandc...
Hope this helps!