jsで使うもの

jsで使うものは、prefix js_ （最後はアンダーバー）をつける。
（id/class名をみるだけで分かるようにするため）

ネストの基本

基本的に全て3階層以内、出来れば2階層区切りを理想とする
例えばボタンは、ボタンの本体 > ボタンの文字の2階層、記事ページは、「記事全体 > タイトル」や「記事全体 > 本文」など。

この一番外側は必ず2単語ハイフン区切りで、内側は1単語（2単語上の単語も）で書く。
例

.button-submit
.buttontext
.buttonicon

また、直下のclassは直下としてのみ扱う（階層の変更は許容しない）
上の例の場合

.button-submit
> .buttontext
> .buttonicon

3階層以上になった場合も、同様に階層の変更を許容しない
例

.button-submit
> .buttontext
> .buttonicon
> .buttonicon > .image

ネスト構造の深いものの扱い方

4階層以上になるものは、3階層以下に分解する
例として3階層を2階層にする考え方を紹介する。
記事の大枠（article）
記事のタイトルの大枠（title）
記事のタイトルの文字（text）
記事のタイトルの横に置くアイコン（icon）

この場合、

.article-wrap
.article-wrap > .title

.title-warp
.title-warp > .text
.title-warp > .icon

のようにコンポーネントに分けるようなイメージで区切る。
そしてhtmlの方はクロスポイントとなる（上半分と下半分の両方の影響を受ける）、.title と .title-wrap でつなぐ。

<div class="article-wrap">
    <div class="title title-wrap">
        タイトルの中身
    </div>
</div>

こうすることで、（"title title-wrap"の部分を左から右に読むと）

.article-wrap > .title

でレイアウト調整した上で、

.title-warp

で中身の責任を移す流れにできる。

細かいルール

名称としてcontainerよりはwrapを使う（タイプ数の違い）
タブのactiveかどうかなどの装飾は .-active の形にして末尾に置く