CSSの設計方法をまとめてみた~BEM編~ ref: http://qiita.com/Sekky0905/items/c1fc597adab5a77b0ce6

file0.html

<section class="block-A">
    <div class="block-B">
        <div class="block-B__element-B1 block-B__element-B1--modifier-B1">B1</div>
        <div class="block-B__element-B2 block-B__element-B2--modifier-B2">B2</div>
    </div>
    <div class="block-C">
        <div class="block-C__element-C1 block-C__element-C1--modifier-C1">C1</div>
        <div class="block-C__element-C2 block-C__element-C2--modifier-C2">C2</div>
    </div>
</section>

file1.txt

.block-A {
  width: 100%;
  padding: 20%;
  .block-B {
    &__element-B1 {
      width: 50%;
      background-color: black;
      &--modifier-B1 {
        color: white;
      }
    }

    &__element-B2 {
      width: 50%;
      background-color: blue;
      &--modifier-B2 {
        color: yellow;
      }
    }
  }
  .block-C {
    &__element-C1 {
      width: 50%;
      background-color: aquamarine;
      &--modifier-C1 {
        color: orange;
      }
    }
    &__element-C2 {
      width: 50%;
      background-color: deeppink;
      &--modifier-C2 {
        color: green;
      }
    }
  }
}

file2.txt

sass --style expanded bem.scss:bem.css

file3.css

.block-A {
  width: 100%;
  padding: 20%;
}
.block-A .block-B__element-B1 {
  width: 50%;
  background-color: black;
}
.block-A .block-B__element-B1--modifier-B1 {
  color: white;
}
.block-A .block-B__element-B2 {
  width: 50%;
  background-color: blue;
}
.block-A .block-B__element-B2--modifier-B2 {
  color: yellow;
}
.block-A .block-C__element-C1 {
  width: 50%;
  background-color: aquamarine;
}
.block-A .block-C__element-C1--modifier-C1 {
  color: orange;
}
.block-A .block-C__element-C2 {
  width: 50%;
  background-color: deeppink;
}
.block-A .block-C__element-C2--modifier-C2 {
  color: green;
}