CSSの設計方法をまとめてみた~SUIT CCS編~(Angularによるサンプル付き) ref: http://qiita.com/Sekky0905/items/605d23d8287fd4c160b4

file0.txt

<p class="u-floatLeft">hoge</p>

file1.txt

.ComponentName{...}
.ComponentName--modifierName{...}

file2.txt

.Compomnent{}
.Compomnent.is-stateOfComponent{}

file3.txt

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss', './utilities.scss']
})
export class AppComponent {
  contentsTitle = 'SUIT CSS!';
  contentsHeading = 'design principles';
  designPrinciples = ['Modularity', 'Cohesion', 'Composition and configuration', 'Loose coupling', 'Soft encapsulation', 'Documentation'];
  clazz = 'AppComponent is-coloredBlack';

  /**
   * 文字を赤くする
   */
  changeColorToRed() {
    this.clazz = 'AppComponent is-coloredRed';
  }

}

file4.html

<!--Component Name-->
<article class="AppComponent">
  <!--ComponentName-descendentName-->
  <header class="AppComponent-header">
    <h1>{{contentsTitle}}</h1>
  </header>
  <!--ComponentName-descendentName-->
  <div class="AppComponent-content">
    <!--ComponentName.is-stateOfComponent-->
    <h1 [class]="clazz" (click)="changeColorToRed()">{{contentsHeading}}</h1>
    <!--utilities-->
    <ul class=" u-listStyleNone">
      <li *ngFor="let p of designPrinciples">
        {{p}}
      </li>
    </ul>
  </div>
</article>

file5.txt

/*AppComponentに対するstyle*/
.AppComponent {
  width: 100%;
  .AppComponent-header {
    color: #0000ed;
  }
  .AppComponent-content {
    color: #3A3A3A;
  }
  .is-coloredBlack {
    color: black;
  }
  .is-coloredRed {
    color: red;
  }
}

file6.css

@charset "UTF-8";
/*AppComponentに対するstyle*/
.AppComponent {
  width: 100%;
}

.AppComponent .AppComponent-header {
  color: #0000ed;
}

.AppComponent .AppComponent-content {
  color: #3A3A3A;
}

.AppComponent .is-coloredBlack {
  color: black;
}

.AppComponent.is-coloredRed {
  color: red;
}

file7.txt

/*listの点を消す*/
.u-listStyleNone {
  list-style: none;
}

file8.css

@charset "UTF-8";
/*listの点を消す*/
.u-listStyleNone {
  list-style: none;
}