ここでは自分の試行錯誤の過程と結果を公開してみました。側のクラス記述が冗長になるのがデメリットです。箇所は何かもう見るもの嫌になってきます。構成が頭に入ってきません。クラス名に以下のようなプレフィックスを付けて意味を持たせる手法を採用しています。ユーティリティ、ちょっとしたスタイル調整をするクラスといった意味があります。こちらの記法で先ほどの記述を書き直してみます。状態を示すマルチクラス記法になったので、クラス名の重複分がなくなり、ちょっとだけスッキリしました。全部マルチクラスにしてはどうだろうか、と思い始めてきます。Modifierここからが独自記法のルールになります。いうルールにしてしまうことで、マルチクラス記法に統一することができます。</ul></nav>このルールには以下のようなメリットがあります。個人的な好き嫌いかもしれませんが、やはり区切り文字が記号2文字は冗長に感じます。相当するクラスには視認性の点からもあまり記号を使いたくありません。することでクラス名の表記に調子がついて視覚的にだいぶ読みやすくなります。側のクラス定義をさらにシンプルにできます。有無でこのコンポーネントの派生を切り替えることができるようになりました。付与する必要がある場合、複数の要素に対してクラスを適用しなくて済むというメリットがあります。方が子孫セレクタの記述をした分、ずいぶんと冗長な個所が増えてしまいました。使って冗長になった記述を圧縮します。名が何度も登場することを避けています。すべて反映されるようになります。クラス名を格納しています。同じように参照すると、以下の例のようにうまく展開されないためです。}と出力され、想定した子孫セレクタが得られない。内の定義で変数を再利用することで、この問題を回避しています。再登場するため、結果的に表記が重複してしまいます。使わない、といった配慮が必要になります。定義の間を行ったり来たりする手間もかかります。定義を以下の形に変更します。再度記述する必要がないため、重複表記を省略することができます。記述は基本的には標準定義をベースに上書きしていくため、前述の記述よりも上記の方が上書き対象の定義同士の位置が近く、最終的な内容の見通しが立ちやすいため、この形になりました。ような記述になります。これはグッタリ来ますね...Sassで書き直すと以下のような形。記法で素直に書いたほうが良さそうです。記述を再整理してみた結果が以下。二重記述になるので、何とか書かなくてもよい方法を模索しましたが、中間変数や配列を用意しても、結局呼び出し定義が煩雑になるので、あまり良い手立てはありませんでした。始めた記法を無駄のない記法にカスタマイズした結果を晒してみました。従来の記法に比べて「コード量が少ない」「クラス定義が文脈として読み取れる」「定義が衝突しにくい」が最大のメリットです。upLoginユーザーは見つかりませんでした。