smacssのステートルールとは、インタラクティブな部分の動きのcssを 横幅、色などと分離して、isをつけるということなのでしょうか？

Question

smacssのステートルールとは、インタラクティブな部分の動きのcssを
横幅、色などと分離して、isをつけるということなのでしょうか？

・自分で調べたところ下記のようにありました。
ステートルール

モジュールの特定の状態のルールを上書きする。
例えば、

<div class=“module is-hidden”>
<h3 class=“module-title”>タイトル</h3>
<p class=“module-description”>テキスト</p>
</div>
	
.is-hidden{
display: none;
}
.is-active{
display:block;
}

モジュールに上書きすることで制御ができる。
Javascriptなどを使い制御したりする。
例: バーガーメニューのメニュー表示ON/OFFなど

・例 下記のような動きを表す部分を分離してisをつけるでよいでしょうか？

/*例１drawermenuのボタンのアニメーション*/
.is-modal-button-wrap__button.active span:nth-of-type(1) {
    transform: translateY(20px) rotate(-315deg);
}

.is-modal-button-wrap__button.active span:nth-of-type(2) {
    opacity: 0;
}

.is-modal-button-wrap__button.active span:nth-of-type(3) {
    transform: translateY(-20px) rotate(315deg);
}

/* 例２左から出てくるdrawer-menu */
.is-drawermenu {
z-index: 300;
margin-left: -100%;
transition-property: all;
transition-duration: 1s;
}

.drawermenu {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 300;
}

例３ 下記のようにただ出したり、消したりするCSSも単純だがアニメーションと考えるのですね。どこまでがisに該当するか微妙です。
.is-hidden{
display: none;
}
.is-active{
display:block;
}

Answer 1

ステートルールのステートとは状態を意味します。
インタラクティブな動きは結果として is-xxxxclassに指定することはあるかもしれませんが、インタラクティブな動きだから is-xxxxというのは少し違う気がします。

.is-modal-button-wrap__button.active span:nth-of-type(1) {

modal-button-wrap__buttonがどういったパーツかはわかりませんが、
.is-modal-button-wrap__button.activeではなくmodal-button-wrap__button.is-active となるんじゃないでしょうか。
（modal-button-wrap__buttonがactiveな状態かどうかが主題となる。is-modal-button-wrap__button では、modal-button-wrap__buttonなのかどうかを問うている。）

drawermenuの例も.is-drawermenuを.is-hiddenとして
.drawermenu（出ている状態）と .drawermenu.is-hidden（隠されている状態）で表現した方が良いかと思います。（別途 .is-drawn （引き出された状態）という状態を表すcssクラスを用意してもいいかもしれません）

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
インタラクティブな動きは結果として is-xxxxclassに指定することはあるかもしれませんが、インタラクティブな動きだから is-xxxxというのは少し違う気がします。

アニメーションのCSSを分離するためにis-と指定するわけではないのですね。
isはおそらく何とかstateの略で、要素の状態を表すCSSだけを分離させるということなのでしょうか？

＞＞＞
modal-button-wrap__button

こちらはドロワーメニューを出すためのボタンです。押すと横から出てきます。

＞＞＞
modal-button-wrap__buttonがどういったパーツかはわかりませんが、
.is-modal-button-wrap__button.activeではなくmodal-button-wrap__button.is-active となるんじゃないでしょうか。

is-activeとするということは動いた状態という意味でつけるべきということでしょうか？

下記がおおもとのソース
/*drawermenuのボタンのアニメーション*/
.modal-button-wrap__button.active span:nth-of-type(1) {
transform: translateY(20px) rotate(-315deg);
}

.modal-button-wrap__button.active span:nth-of-type(2) {
opacity: 0;
}

.modal-button-wrap__button.active span:nth-of-type(3) {
transform: translateY(-20px) rotate(315deg);
}

/* drawermenu-overlay-半透明のグレーバック */

＞＞＞
drawermenuの例も.is-drawermenuを.is-hiddenとして
.drawermenu（出ている状態）と .drawermenu.is-hidden（隠されている状態）で表現した方が良いかと思います。（別途 .is-drawn （引き出された状態）という状態を表すcssクラスを用意してもいいかもしれません）

難しいですね。
アニメーションのCSSを分離するならば、他のサイトや要素に同じアニメーションをつけたいときに、余計なCSSまでついてくると困るので分離するというのはよくわかります。
ただ、状態のCSSだけを分離するりゆうは何なのでしょうか？

また、is-hidden（隠されている状態）のCSSとは具体的にどんなCSSのことなのでしょうか？
下記のCSSなら
/* 左から出てくるdrawer-menu */
.drawermenu {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;/* height: 101%;margin-right: -0.1rem;ではみ出させたスクロールバーを隠すため */
padding-top: 0rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
transition-property: all;
transition-duration: 1s;
}

下記のように分離するのでしょうか？
/* 左から出てくるdrawer-menu */
.is-hidden {
margin-left: -100%;
}

[flied_onion]

> 要素の状態を表すCSSだけを分離させるということなのでしょうか？

そうですね、私はそういう理解です。無効だったり利用可能だったりするときに適用したいスタイルを書くイメージです。

> is-activeとするということは動いた状態という意味でつけるべきということでしょうか？

もともと .active がどういう意味でつけていたかにもよります。
is-activeといった時には「使える状態」か「フォーカスがあっている状態」かを指すことが多いと思います。（使える状態だとenableかもしれませんが）

> ただ、状態のCSSだけを分離するりゆうは何なのでしょうか？

ひとつには可読性やいつ使うCSSクラスなのかを明確にするためでしょうね。
class="menu is-disabled" ならば今メニューが無効になっていることがわかり、jsでつけたり外したりするコードもより読みやすくなるということでしょう。
同じ要素なら同じような状態になりえるだろうし統一感で言えば同じ状態ならば同じスタイルになることが多いのだから、共通の名前にしておいた方が良いという考えもあるようです。（ .btn.error とか .btn.red、 .btn.invalid など散在させるよりも .btn.is-error にしておいた方がいいということですかね）

> 下記のように分離するのでしょうか？

margin-left以外隠している時に適用したいスタイルがないならばそれで良いと思います。
分離の仕方と難しく考えず、そのスタイルがある状態のとき専用なら is-xxxなクラスにするぐらいに考えておけば良いように思います。

[退会済みユーザー]

＞＞＞
そのスタイルがある状態のとき専用なら is-xxxなクラスにするぐらいに考えておけば良いように思います。

ありがとうございました。

つまり、
ホバーすると、光彩が出るアニメーションがあれば、
box-shadowをis-shadow
その他アニメーションのcssのdurationやイージング、propatyなどは分離してｕ－animationにして、マルチクラスにすれば良いということですね。
これによって、box-shadowは、ホバー時にだけ当たるcssなんだと管理者がわかるので、わかりやすくするためにそこだけ分離するということですね。

ドロワーメニューで、margin-left:-100%;にして隠しておくならこれはis-hidden
その後表記する際のmargin-left:0;はis-showとするということですね。