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

rscss2e

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

基本原則

FLOCSS を基本とし子要素以下を RSCSS で記述する

独自規則

• フォルダ・ファイル・class は ローワーキャメルケース で記述する
• アンダースコアは使わない
• 親要素・バリアント 以外ではハイフンを使わない
• 親要素はアルファベット小文字1文字 + ハイフンの prefix をつける
• Object フォルダ下のフォルダは上階層に移動し Object フォルダは使用しない
• 深いネスト は極力避けるも許容する
• Utility・Helpers は使わずバリアントで対応
• NuxtJS などのフレームワークではページ・コンポーネント内に scoped で記述するのを優先させ Layout・Project は使わない
• プラグイン・モジュールなどの CSS を上書きする時などは例外を認める
• 例外を使用する際は scoped や wrap して影響範囲を極力狭める

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

CSS （scss の例）

			備考	prefix
style/	component/		component	c-
	foundation/	_base.scss	reset css の補完など
		_destyle.scss	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 + アトミックデザイン の例）

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

比較例

FLOCSS

.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) ') ';
      }
    }
  }
}

<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

.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) ') ';
      }
    }
  }
}

<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
こちらまだ README.md だけですがテンプレートみたいなものをコミット予定です

rscss2e とは

echizenya & egawa の二人の e で考えたので rscss2e と仮称しています