Stylus + БЭМ, как правильно унаследовать?

Question

[danforth]

Начинаю разбираться с методологией БЭМ и попутно пытаюсь разобраться со Stylusом. Вопрос такой: есть баннерная сетка (.grid) и у неё есть 5 рядов (.grid__row). Первый и второй ряд - высота 300px, третий и четвертый - 250px, пятый - 200px. Как правильно унаследовать.
Как .grid, так и .grid__row должны иметь 100% ширину. Вот что я наваял:

.grid
  width 100%
  &__row
    @extends .grid
    &:nth-child(1):nth-child(2)
      height 300px
    &:nth-child(3):nth-child(4)
      height 250px
    &:nth-child(5)
      height 200px

После обработки это превращается в

.grid,
.grid__row {
  width: 100%;
}
.grid__row:nth-child(1):nth-child(2),
.grid__row__row:nth-child(1):nth-child(2) {
  height: 300px;
}
.grid__row:nth-child(3):nth-child(4),
.grid__row__row:nth-child(3):nth-child(4) {
  height: 250px;
}
.grid__row:nth-child(5),
.grid__row__row:nth-child(5) {
  height: 200px;
}

.grid__row__row появилось из-за наследования? Как избежать такой ситуации и как вообще более правильно сделать баннерную сетку с рядами и баннерами разного формата (не адаптивную и не резиновую даже), применяя при этом методологию БЭМ и Stylus?

Answer 1

[Олег]

Зачем тут @extends ? Только ради ширины? Это не разумно. Зачем псевдокласс nth-child? Если row поменять местами - вся ваша верстка сломается, это совсем от бэма далеко.

<header class="header">
	<div class="row header__row">
		<div class="row__col"></div>
		<div class="row__col"></div>
	</div>
</div>

.header
	
	&__row
		height 300px

Answer 2

[Greg Popov]

Почитайте про БЭМ внимательнее, там и найдете ответ.