各サイズはpx換算で、
1. 8の倍数
2. 4の倍数
3. 2の倍数
4. 1
の優先度で調整していく。

評価値として、
1. 8の倍数 = -0
2. 4の倍数 = -1
3. 2の倍数 = -2
4. 1 = -3
とすると分かりやすく、あくまでもバランス・見た目を最優先とした上で、この評価値を高める意識で判断する。

例えば、DX上で13pxがあれば、
1. 8+4=12 (評価値 -1)
2. 8+4+1=13（評価値-1-3=-4）
と、より上の方を優先する。（あくまで見た目が最優先で、次の判断基準として）

他にも、18pxの場合、
1. 8x2=16（評価値 -0）
2. 8x2+4=20（評価値 -1）
3. 8x2+2=16（評価値 -2）
と、より上の方を優先する。

以下の形に分けたものを、application.scss などでまとめる。
まとめる順番は下の順に合わせる。

パーツ

_elements.buttons
_elements.navs

コンポーネント

パーツを複数組み合わせたもの。
フォームの中に含まれるボタンは汎用的なもの（_elements.buttons に書かれたもの）を使う場合はこの中には書かず、フォーム全体のレイアウトについてを書くイメージ（フォーム特有のボタンを使う場合は、この中にボタンについても書く）
_components.forms
_components.videoplayer

ページ

ページ固有のもの（基本的にRailsのcontroller単位）
_pages.videos
_pages.rooms

ライブラリ

_libraries.load
など

設定系（色・プリント設定など）

_settings.colors
_settings.print

全体で使う共通の関数

_mixins

例
css
@function rem-calc($size) {
$remSize: $size / 16;
@return #{$remSize}rem;
}


強制上書き（できるだけ使わない）

_trumps.links
など

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 の形にして末尾に置く