[解決済み】html/cssのidとclassの標準的な命名規則は何ですか?[クローズド]
質問
使用しているプラットフォームに依存するのでしょうか、それともほとんどの開発者が提案/遵守している共通の慣習があるのでしょうか?
いくつかの選択肢があります。
-
id="someIdentifier"'
- は、javascriptのコードとかなり整合性があるように見えます。 -
id="some-identifier"
- は、html5的な属性などの方が、htmlの中にあるような気がします。 -
id="some_identifier"
- は、rubyのコードとかなり整合性があり、Javascriptの内部ではまだ有効な識別子です。
私は、上記の#1および#3が、Javascriptとよりうまく動作するため、最も理にかなっていると考えていました。
これに対する正解はあるのでしょうか?
どのように解決するのですか?
ないんです。
ハイフンは私のテキストエディタ(Gedit)のシンタックスハイライトを混乱させるため、私はいつもアンダースコアを使用していますが、これは個人的な好みの問題です。
これらの規約はすべて、あちこちで使われているのを見たことがあります。自分にとって一番見やすく、読みやすいもの、また何度も使うものなので打ちやすいものを選んでください。例えば、アンダースコアのキーがキーボードの裏側にある場合は(可能性は低いですが)、ハイフンを使用することになります。自分にとってベストなものを選んでください。また、これらの3つの表記はいずれも読みやすいものです。チームで作業している場合は、チームで指定された規則に従ってください(もしあれば)。
2012年更新
私はプログラミングの方法を変えてきました。今はキャメルケース(
thisIsASelector
ハイフンの代わりに、"H "を使うようになりました。どんなものでも
あなた
というのは、時間の経過とともに変化しやすいからです。
2013年更新
年がら年中、混ぜるのが好きなようです...。Sublime Textに変えてからしばらくBootstrapを使っていましたが、またダッシュに戻りました。今の私には、un_der_scoreやcamelCaseよりもずっとすっきりした印象です。 しかし、私の最初の指摘はまだ有効です。 はありません。 標準的なものです。
2015年更新
ここで規約のある面白いコーナーケースは
サビ
. 私はこの言語をとても気に入っていますが、コンパイラーは
underscore_case
. この警告は消すこともできますが、コンパイラがデフォルトで慣習を強く示唆するのは面白いですね。大規模なプロジェクトでは、よりクリーンなコードになることは間違いないでしょう。
2016年更新 ( あなた を要求した)
を採用しました。
BEM
今後、私のプロジェクトでは、この規格を使用します。クラス名はかなり冗長になってしまいますが、クラスとそれに付随するCSSに良い構造と再利用性を与えていると思います。私は、BEM
は、実は
を標準とする(だから私の
no
は
yes
おそらく)でも、プロジェクトで何を使うかは、あなた次第です。最も重要なことは、選んだものに一貫性を持たせることです。
2019年更新 ( あなた を要求した)
かなり長い間、CSSを全く書かなかった私が、あるところで仕事をするようになり、その中で OOCSS を、ある製品で使っています。個人的には、至る所にクラスを散らかすのはかなり不愉快ですが、HTMLとCSSを常に行き来する必要がないのは、かなり生産的な感じがします。
でも、やっぱりBEMに落ち着きますね。冗長ですが、名前空間があるため、Reactコンポーネントでの作業が非常に自然です。また、ブラウザテストで特定の要素を選択するのにも最適です。
OOCSSとBEMは、世の中にあるCSS標準の一部に過ぎません。自分に合うものを選びましょう。どれも妥協の連続です。 は、それほど良いものではありません。 .
2020年のアップデート
今年はつまらない更新です。まだBEMを使っています。私の立場は、上記の理由で2019年のアップデートからあまり変わっていません。チームの規模に合わせてスケールし、CSSの貧弱な機能セットを好きなだけ、あるいは少しも隠さない、自分に合ったものを使いましょう。
関連
-
[解決済み] デフォルトで空白を選択
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] オブジェクト名の前のシングルアンダーコアとダブルアンダーコアの意味は何ですか?
-
[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] Pythonの変数名や関数名の命名規則について教えてください。
-
[解決済み] C#の定数の命名規則?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] will-change' や translateZ() ハックは 'transition: height' のパフォーマンスを向上させるか?
-
[解決済み] HTMLファイルへのリンクは可能ですか?
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] Railsアプリケーションにアイコンを追加する
-
[解決済み] type="application/x-shockwave-flash "で表示可能な形式は?
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?