Q&A
私もclassとかに「-」から入る命名は見たことないですね。
すごくしょーもない質問なのかもしれないですが教えていただきたいです。
CSSないでスタイル名の頭に「-」をつけているスタイル名をよくみかけますが
あれってどういう時、どういう意図で使ってるんですか？
（例）
.-textCenter{
text-align: center;
}
.-grayText{
color: #696969;
}
.-pc{
display: block;
}
.-sp{
display: none;
}
回答3件
0
ベストアンサー
BEM記法という命名方法がありまして、それの派生でハイフンから始める書き方があるようです。
html
1<div class="box box-bgRed box-open box-close box-sp"> 2<div class="box -bgRed -open -close -sp">
上の書き方よりも下の書き方のほうが短くなるからという理由だったかと。
「BEMはクラス名が長くなっていく書き方なので、少しでも文字数を減らして指を楽にしたいという試み」
のような感じの文言をどこかで見かけました。BEM記法について調べていた時だったと思います。
ご参考まで。
投稿2021/04/15 04:07
退会済みユーザー
総合スコア0
0
よくみかける
CSSないでスタイル名の頭に「-」をつけているスタイル名をよくみかけますが
それは質問者さんの観測圏内でよく見かけているだけなので、十人十色だと思います。
私は目にしていません。
それを書いた人に確認するしかないと思います。
属性セレクタ
属性セレクタは "-" 区切りの単語にマッチする事も出来ます。
[att|=val]
次を満たす要素を表現する ：
att 属性を有していて，その値は次を満たす ：
val に一致するか, ［ val, U+002D (-) ］並びで始まる
これは主として BCP 47 （ [BCP47] ） またはその後継版の言語 subcode と照合する用途が意図されている（例えば HTML の a 要素の hreflang 属性）。 lang 属性（または xml:lang 属
なので、単語の区切りは "_" ではなく、"-" を使うように「私は」しています。
最も、その為に "-" を接頭辞に使用したことは一度もありませんが…。
下記スタイルはGoogle Chrome 89.0.4389.114で動作しませんでした。仕様上は動作しそうですが…。
HTML
1<style> 2 [class|="foo"] { 3 color: black; 4 background-color: #fee; 5 } 6</style> 7<body> 8 <p class="-foo">sample text</p>
Re: mitanyam さん
投稿2021/04/15 03:09
編集2021/04/15 03:22
総合スコア18189
後半に関して、仕様を誤読していると思います。属性値が "foo" に一致するか、"foo-" で始まる場合にマッチするという意味です。
0
ネーミングルールについてはプロジェクトで決まっているものなので意図まで知りたいのでしたら結局は書いた人に聞くしかありません。
あくまで命名に使える文字列の1つでしかありませんので。
フレームワークなどでは「通常はそこから命名はじめることはないから」と区別がわりのプレフィックスをつけることもあるようですが（md-みたいな）、ご自身が確認されたものと意図が同じかどうかというのは他人には分かりません。
想像や解釈はできても事実とは異なることが往々にしてあります。
投稿2021/04/15 02:44
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/04/15 04:11
2021/04/15 04:15