クラス名のつけ方について。

クラス名のつけ方について。
下記のように0.5という場合.を使えないので下記のようにしていますが、
問題ないでしょうか？もっといい方法はありますでしょうか？

.u-transform-0dot5s-ease {
transition: transform 0.5s ease; /* easeはイージングの一種 */
}

行動規範の内容に同意します

回答2件

ベストアンサー

CSSでエスケープシーケンス

CSSセレクタではエスケープすればどんな文字でも指定できます。

HTML
1<style>
2/**
3 * Unicodeエスケープ
4 * class="hoge.foo" 
5 */
6.\0068\006F\0067\0065\002E\0066\006F\006F {
7  color: red;
8}
9
10.hoge\.foo {
11  font-weight: bold;
12}
13</style>
14<body>
15<p class="hoge.foo">hoge.foo</p>

class セレクタの制限

ただし、HTMLでclass名を指定する都合上、classセレクタで空白文字を指定すると100%マッチしないセレクタとなります。

HTML
1<style>
2/* class="hoge foo" */
3.\0068\006F\0067\0065\0020\0066\006F\006F {
4  color: red;
5}
6</style>
7<body>
8<p class="hoge foo">hoge foo</p>

ジェネレータ

Unicodeエスケープは下記URLの「\uXXXX から u を取り除いた文字列」です。

Text Escaping and Unescaping in JavaScript

class名/id名はデザイン/レイアウトを表す名前にしない

.u-transform-0dot5s-ease のように CSS の transition: transform 0.5s ease をそのまま表す名前は好ましくありません。
.red や .left と同じでデザイン/レイアウトを表す名前にすると後でデザインをごっそり入れ替える時に class 名まで変更しなくてはならなくなります。
例えば、赤色(.red)から緑色(.green)に変えるならHTMLのclass属性値も追従して変更しなければなりません。
下記リンクが参考になると思います。

CSSセレクタの名前を付けるときに考えていること - morishitter blog

Re: webpage さん

投稿2016/09/22 22:58

編集2016/09/23 11:13

think49

総合スコア18166

退会済みユーザー

2016/09/23 10:16

エスケープとは￥を.などの前につければその直後にどんなものも使えるということでよいでしょうか？そしてHTML上では不要ということでよいでしょうか？確かにそれができるならそれがいいですね。ただ、gotocss機能はちゃんと機能しますか？

think49

2016/09/23 11:15 編集

> エスケープとは￥を.などの前につければその直後にどんなものも使えるということでよいでしょうか？ > そしてHTML上では不要ということでよいでしょうか？ > ただ、gotocss機能はちゃんと機能しますか？試せばわかることは自分で試してみるのが自分にとっても為になると思います。 `.u-transform-0dot5s-ease` の是非について回答していなかったので、親記事を編集しました。

退会済みユーザー

2016/10/02 10:30

確かに言われたとおりにできたのですが、サブライムのgotocssは対応してくれないようですね。ここはあきらめるしかないのでしょうね。

行動規範の内容に同意します

どう書いても分かりやすければ何でもいいです。
設計がしっかりしていれば使うことはまずないと思いますが、自分だったらこう書くと思います。

css
1.u-fontsize-em-80per {
2	font-size: .8em;
3}
4
5.u-transitionduration-500ms {
6	transition-duration: .5s; /* 500ms という指定も可能 */
7}

投稿2016/09/23 02:04

gin

総合スコア2722

退会済みユーザー

2016/09/23 10:08

ありがとうございます。確かにその書き方はありですね。ちなみにperは80%という意味でしょうか？

gin

2016/09/23 10:32

パーセントのperです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！