少し前からBEMやSMCASSなどのCSS設計などを知り、なるほどこういう方法があるのかと、苦戦しながら実践していました。
そんな中@hiloki@githubさんが自前でFLOCSSというCSS設計思想をGithubで公開していたので、
自分もこういうの作ってみたい！と思いたち、
稚拙ながら設計を考えてみました。

OOCSS,SUIT,SMACSS,FLOCSSあたりを参考にしています。

CSSのカテゴライズ

Base
Component
Unit
- layout
- pack
Asset
- utility
- assist

CSSをこのように分割します。

Base

SMACSSのBaseにあたるものです。

Component

ページを構成するパーツのすべてです。
再利用しやすいよう、親に依存せず、Component単独でスタイルを維持できるように設計します。
Componentは自分自身の見た目のみを司り、位置関係に関しては、後述するUnitクラスがすべて受け持つようになります。

命名規則

ComponentName
ComponentName--skinName_[n]
ComponentName-descendentName_[n]

Componentはskeletonとskinに分けて記述します。

ComponentNameがスケルトンになり、そのComponentに形作るための必要最低限のスタイルを司り、
ComponentName--skinNameが、そのComponentのskin（modifier）のスタイル司っています。
また、Componentを作るモジュール群に関しては、ComponentName-descendentNameで記述します。

Componentの子要素にはすべてクラス名でスタイル当てていきます。(構造とスタイルの分離のため)
親コンポーネントによって、子コンポーネントの形が変わる場合には親コンポーネントと同じskinNameを付与し対応します。

例を示します。

<div class="Island Island--notify">
  <div class="Island-head">
    <h3 class="Heading Heading--h3"></h3>
  </div>

  <div class="Island-body">
    <ul class="LinkList LinkList--notify">
      <li class="LinkList-item"></li>
    </ul>
  </div>
</div>

セマンティックに名前を付けられない場合、またはパターンがあるものに関しては、コンポーネント名(または、skinName,descendentName)の最後に_[value]を追加し対応します。

<a href="#" class="TextLink TextLink_1"></a>

Unit

Unitにはページで一つだけしか使えないLayoutクラスと、汎用的に使えるPackクラスが存在します。

先述したように、
Componentは、そのComponentがどのような見た目をしているかだけを司り、
そして、その親のUnitが、そのComponent(またはComponent群)が、どのような位置関係にあるかを司ります。

これによって、Componentがどの位置にあるかについては全く関与しないで、自分自身の見た目だけを司ることができます。

Layout

ページに唯一のUnitとしてはプリフィックスとしてl-をつけます(Layout)
LayoutはSMACSSでいうThemeの役割も担っており、ページごとにオリジナルなComponentにしたい場合のフックに利用します。

.l-header {}
.l-sidebarRight {}
.l-specialPage {}

Pack

汎用的に使えるUnitとしてプリフィックスとしてp-をつけます(Pack)

.p-container {}
.p-streamCard {}

Asset

Assetはグローバルに使えるUtilityクラスと、コンポーネントを補助するAssistクラスが存在します。

Utility

marginやpadding、そしてclearfixなどグローバルに使える、単一のスタイルが付与されたクラスがここに分類されます。
プリフィックスとしてu-をつけます。
スタイルには明示的に!importantを付与します。

.u-mb10 {}
.u-clearFix {}

Assist

Assistクラスは必ずコンComponentとセットで利用します。
必ずCSSはComponentとの結合セレクタで定義します。

.has-border {}
.has-header {}

タブがアクティブ、非アクティブやモーダルが、表示、非表示などコンポーネントの状態を示すときはis-を使います

.is-hidden {}
.is-error {}
.is-active {}

.Tab-button.is-active {}

ボーダーがある場合、ない場合やアイコンをある場合、ない場合などコンポーネントのパーツを拡張したり、修飾する場合はhas-を使います

.has-border {}
.has-header {}
.has-icon {}

.Panel.has-header {}

skinとほぼ同じ役割のように見えますが、クラス属性が冗長になるのを防ぐために、モジュールの追加(パネルのヘッダ)やグローバルなモジュール(枠線など)の場合はhas-を使います。

<div class="Panel Panel--primary has-header"></div>

以上です。

不満な所

制約が多くて覚えにくい(致命的)
の割に、複雑なUIを形成する際に詰まりそう

そして

心安らかに、拡張していけるようになりたい。

あとは、とにかくプロジェクトメンバーとの思想の共有と、コードレビューを徹底する。

作ってみて思ったのですが、
設計はメンバーで徹底する事が大事なので、もう少し、軽めに分かりやすくシンプルにするのが、寿命が長い設計のためには必要だなと思いました。

はじめて、こういうものを作ってみましたが、
これから、自分の成長とともにアップデートしていきたいなと思います。

はじめてのCSS設計