rscss2e 〜 FLOCSS + RSCSS で記述する大規模開発に耐える CSS 構成案

# rscss2e

大規模開発に耐える CSS 構成案

## 基本原則

[FLOCSS](https://github.com/hiloki/flocss) を基本とし子要素以下を [RSCSS](https://rscss.io/) で記述する

## 独自規則
- フォルダ・ファイル・class は [ローワーキャメルケース](https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9) で記述する
- アンダースコアは使わない
- 親要素・[バリアント](https://rfs.jp/sb/html-css/html-css-guide/rscss.html#i-6) 以外ではハイフンを使わない
- 親要素はアルファベット小文字1文字 + ハイフンの prefix をつける
- Object フォルダ下のフォルダは上階層に移動し Object フォルダは使用しない
- [深いネスト](https://rfs.jp/sb/html-css/html-css-guide/rscss.html#i-19) は極力避けるも許容する
- Utility・Helpers は使わずバリアントで対応
- [NuxtJS](https://nuxtjs.org/) などのフレームワークではページ・コンポーネント内に scoped で記述するのを優先させ Layout・Project は使わない
- プラグイン・モジュールなどの CSS を上書きする時などは例外を認める
- 例外を使用する際は scoped や wrap して影響範囲を極力狭める

## ファイル・ディレクトリ構成

### CSS （scss の例）

| | | | 備考 | prefix |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| style/ | component/ | | component |  c- | 
| | foundation/ | \_base.scss | reset css の補完など | |
| | | \_[destyle.scss](https://nicolas-cusan.github.io/destyle.css/) | reset css お好みのものを | |
| | | \_mixin.scss | mixin | |
| | | \_variable.scss | 変数 | |
| | layout/ | | NuxtJS などでは使わない | l- |
| | plugin/ | | plugin の css を上書き | |
| | project/ | | NuxtJS などでは使わない | p- |
| | \_styleResources.scss | | NuxtJS などのページ・コンポーネントで使用する css をまとめたもの | |
| | common.scss | | css を import | |

### ページ・コンポーネント（NuxtJS + [アトミックデザイン](https://atomicdesign.bradfrost.com/) の例）

| | | | prefix |
| ------------- | ------------- | ------------- | ------------- |
| app/ | componets/ | atoms/ | a- |
| | | molecules/ | m- |
| | | organismas/ | o- |
| | layouts/ | | l- |
| | pages/ | | p- |

## 比較例

### FLOCSS

```scss
.c-list {
  margin-top: 20px;
  margin-left: 1.5em;
  &__item:not(:first-child) {
    margin-top: 10px;
  }
  &---disc {
    list-style-type: disc;
  }
  &--decimal {
    list-style-type: decimal;
  }
  &--lowerAlpha,
  &--lowerRoman,
  &--parentheses {
    list-style-type: none;
    counter-increment: cnt;
    margin-left: 0;
    padding-left: 1.5em;
    text-indent: -1.5em;
    &::before {
      display: marker;
    }
  }
  &--lowerAlpha {
    > .c-list__item {
      &::before {
        content: '(' counter(cnt, lower-alpha) ') ';
      }
    }
  }
  &--lowerRoman {
    > .c-list__item {
      &::before {
        content: '(' counter(cnt, lower-roman) ') ';
      }
    }
  }
  &--parentheses {
    > .c-list__item {
      &::before {
        content: '(' counter(cnt) ') ';
      }
    }
  }
}

```

```html
<h1>list-style-type 切り替え</h1>

<ul class="c-list">
  <li class="c-list__item">なし - reset css</li>
</ul>

<ol class="c-list">
  <li class="c-list__item">なし - reset css</li>
</ol>

<ul class="c-list--disc">
  <li class="c-list__item">・</li>
</ul>

<ol class="c-list--decimal">
  <li class="c-list__item">1.</li>
</ol>

<ol class="c-list--lowerAlpha">
  <li class="c-list__item">a.</li>
</ol>

<ol class="c-list--lowerRoman">
  <li class="c-list__item">i.</li>
</ol>

<ol class="c-list--parentheses">
  <li class="c-list__item">(1)</li>
</ol>
```

### rscss2e


```scss
.c-list {
  margin-top: 20px;
  margin-left: 1.5em;
  > .item:not(:first-child) {
    margin-top: 10px;
  }
  &.-disc {
    list-style-type: disc;
  }
  &.-decimal {
    list-style-type: decimal;
  }
  &.-lowerAlpha,
  &.-lowerRoman,
  &.-parentheses {
    list-style-type: none;
    counter-increment: cnt;
    margin-left: 0;
    padding-left: 1.5em;
    text-indent: -1.5em;
    &::before {
      display: marker;
    }
  }
  &.-lowerAlpha {
    > .item {
      &::before {
        content: '(' counter(cnt, lower-alpha) ') ';
      }
    }
  }
  &.-lowerRoman {
    > .item {
      &::before {
        content: '(' counter(cnt, lower-roman) ') ';
      }
    }
  }
  &.-parentheses {
    > .item {
      &::before {
        content: '(' counter(cnt) ') ';
      }
    }
  }
}

```

```html
<h1>list-style-type 切り替え</h1>

<ul class="c-list">
  <li class="item">なし - reset css</li>
</ul>

<ol class="c-list">
  <li class="item">なし - reset css</li>
</ol>

<ul class="c-list.-disc">
  <li class="item">・</li>
</ul>

<ol class="c-list.-decimal">
  <li class="item">1.</li>
</ol>

<ol class="c-list.-lowerAlpha">
  <li class="item">a.</li>
</ol>

<ol class="c-list.-lowerRoman">
  <li class="item">i.</li>
</ol>

<ol class="c-list.-parentheses">
  <li class="item">(1)</li>
</ol>
```

## テンプレート
[https://github.com/echi2enya/rscss2e](https://github.com/echi2enya/rscss2e)
こちらまだ README.md だけですがテンプレートみたいなものをコミット予定です

## rscss2e とは
[echizenya](https://twitter.com/h_echizenya) & egawa の二人の e で考えたので rscss2e と仮称しています