About Simplifying nested components

[exalted]

In section Simplifying nested components the example given is this:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

It curious how the "search button" is labeled as a component (or a nested component in this example) rather than an element, such as:

<div class='search-form'>
  <input class='input' type='text'>
  <button class='searchbutton -red -large'></button>
</div>

... and then for the solution it's "converted" to an element with class submit. This is pretty confusing, because the solution not only suggesting using @extend, but also refactors the DOM. I know you shouldn't reach into nested components however, so the following is not good:

.search-form {
  > .search-button { /* ... */ }
}

But then I don't quite follow how good is @extend as a solution to a non-problem in the first place. I am pretty confused.

I guess my question is pretty much aligned with #9 at this point, although I would like to hear more on this.

Thanks

[rstacruz]

I know you shouldn't reach into nested components however, so the following is not good:

good point, that should probably be changed; that wasn't a good example to begin with.