ステートis-について

Question

https://teratail.com/questions/42871の続き
ご返答がもらえなかったので、再質問にしました。
下記の認識でよいでしょうか？

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

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

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

Answer 1

is-shadowではなくis-hoverがいいと思います。

あとこれは個人の好き好きですが、
私はdrawerの初期値(？)にis-hiddenを付けることはしません。
ノーマルから状態が変化したものに対してis-XXXXXを付けますね。
なのでis-hiddenは最初表示されていて何かのアクションで非表示になるものに対して付けます。

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
is-shadowではなくis-hoverがいいと思います。

is-その要素の状態
という名前の付け方ではないのですか？

is-hoverだとどんな状態や見た目ではなく、どんなアクション時にその状態になるかということになりますが、
どんなアクションの時にその状態になるかを記載するべきなのでしょうか？

それだとドロワーメニューを隠しておくための、margin-left-100もis-hiddenではなくis-何になるのですかね？
初期状態なので何もしていないですよね。

・また本題ですが、下記の認識は正しいでしょうか？

ホバーすると、光彩が出るアニメーションがあれば、
まず、box-shadowをis-shadow

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

つまりisをつけて分離するメリットは、～時のみにあたるcssなんだよと、管理者に伝えることができるということなのですね。

[gin]

「どんなアクションの時にその状態になるかを記載するべきなのでしょうか？」
こっちです。

ドロワーメニューもユーザーは最初なんのアクションもしていないので何もいりません。

「is-shadow」を見て「あっ！hoverのときのだな」ってわかるのは制作した本人だけですね。
その要素がどういう状態かというのはどちらかといえば「u-XXXXX」のユーティリティ系だと思います。
「u-shadow」だと「あ、影なのね」って分かります。

[退会済みユーザー]

＞＞＞
どんなアクションの時にその状態になるかを記載するべきなのでしょうか？

つまり、is-hover、is--sildeなどで、is-hidden、is-alertなどではないというお考えないのですね。

状態を示すためにつけると聞いていますが、隠れている状態、表記されている状態などを示すということではないのですね。

[gin]

確かに「アクションだけ」じゃないですね。
「is-hidden」や「is-current」なども使いますし。

意味的なものって感じでしょうかね。
何かをhoverしたときに何かのデザイン(shadowとか)が適用されるのであれば「is-hover」です。
もともと表示されていたものが非表示になったら「is-hidden」です。
元から非表示なものにはつけません。これが表示になったら「is-show」や「is-active」などを付けます。

なので自分が「is-shadow」を使用するとすれば、デバイスが光学感知で手の影などで変化する場合とかですかね。

[退会済みユーザー]

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

とは違う考えなのですね。

[gin]

同じですよ？

[退会済みユーザー]

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

そうなら、私も同じだと思います。
と書くと思いますが...

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

is-hiddenがdisplay:none;でいいのですね。

[退会済みユーザー]

まあ、よくわからないですが、
そのスタイルがある状態のとき専用なら is-xxxなクラスにするぐらいに考えておけば良いように思います。
と同じ意見なのですね。

is-hiddenがdisplay:none;でいいのですね。

[gin]

前の回答者であるflied_onionさんと同意見だということです。
一貫してそれをベースに書いています。

「私も同じだと思います。」と書けばwebpageさんの返信と同意見ということになります。
それは少々違うということです。

「is-hidden」が「display:none;」かということですが、それは元のスタイルによります。
あくまで「今、非表示ですよ」と言ってるものなので。
ただし汎用的に「display:none;」として使用するとルール化していればそれでいいです。

前にも言いましたがユーティリティとごっちゃにしてるんじゃないでしょうか？
前の質問に準拠して言えば、
-------
.u-animation { ... }
.u-animation.is-hover { /*ここにshadowをかく*/ }

.menu { display: none; }
.menu.is-active { display: block; /*見えたときのスタイルをかく*/ }
-------
こういう使い方をするものです。