Mozilla が推奨する CSS 属性の記述順序と命名規則_html/css_WEB-ITnose

传说中の Mozilla 推荐

Java代码

1. /* mozilla.org Base Styles
* fantasai によって管理されています
*/
/* 推奨される順序:
* 表示
* リストスタイル
* 位置
* float
* clear
* width
* 高さ
* margin
* padding
* border
* 背景
* カラー
* フォント
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
25. ...

来源：

Java代码

http://www.mozilla.org/css/base/content.css

在怿飞のブログのこの篇文章里、又将上の属性表示プロパティ、自己プロパティ、およびテキスト プロパティの 3 つのグループに分かれています。 戻って、これとブラウザの解析手順が関係します。 ブラウザは、まず DOM 位置を確認し、次に自身のプロパティを解析し、次に内部オブジェクトを再解析します。

Mozilla オフィシャルで、いかなる CSS 記述シーケンスも推奨していません。
字母序列

NETTUTS 上に時折良い文章がありません、前不休、Trevor Davis が共有一篇：より良い文章を即座に書くための 5 つの方法CSS。

利点は次のとおりです: 絶対的、誰でも遵守する、一視明白。アンディ フォード推奨の順序

アンディ フォードは HTML と CSS の分野の専門家であり、最近一篇の文章を書きました: Order of the Day: CSS プロパティ。 文章推荐的CSS书写顺序:



Java代码

1. 1. 表示と フロー
2. 2. 配置
3. 3. 寸法
4. 4. マージン、 パディング、 境界線、 アウトライン
5. 5. タイポグラフィ スタイル
6. 6.背景
7. 7. 不透明度、 カーソル、 生成された コンテンツ
9. 例子：
11. el {
12. display: ;  
13. 可視性: ;  
14. float: ;  
15. クリア: ;  
17. 位置: ;  
18. トップ: ;  
19. 右: ;  
20. 下: ;  
21. 左: ;  
22. z-index: ;  
24. 幅: ;  
25. 最小幅: ;  
26. 最大幅: ;  
27. 身長: ;  
28. 最小高さ: ;  
29. 最大高さ: ;  
30. オーバーフロー: ;  
32. マージン: ;  
33. マージントップ: ;  
34. マージン右: ;  
35. margin-bottom: ;  
36. マージン左: ;  
38. パディング: ;  
39. padding-top: ;  
40. パディング右: ;  
41. padding-bottom: ;  
42. padding-left: ;  
44. 境界線: ;  
45. ボーダートップ: ;  
46. border-right: ;  
47. border-bottom: ;  
48. border-left: ;  
50. border-width: ;  
51. border-top-width: ;  
52. border-right-width: ;  
53. border-bottom-width: ;  
54. border-left-width: ;  
56. ボーダースタイル: ;  
57. border-top-style: ;  
58. border-right-style: ;  
59. border-bottom-style: ;  
60. border-left-style: ;  
62. ボーダーカラー: ;  
63. border-top-color: ;  
64. border-right-color: ;  
65. border-bottom-color: ;  
66. border-left-color: ;  
68. 概要: ;  
69. リストスタイル: ;  
71. テーブルレイアウト: ;  
72. キャプション側: ;  
73. ボーダー折りたたみ: ;  
74. 境界線の間隔: ;  
75. 空のセル: ;  
77. フォント: ;  
78. フォントファミリー: ;  
79. フォントサイズ: ;  
80. 行の高さ: ;  
81. フォントの太さ: ;  
82. text-align: ;  
83. テキストインデント: ;  
84. テキスト変換: ;  
85. テキスト装飾: ;  
86. 文字間隔: ;  
87. 単語間隔: ;  
88. 空白: ;  
89. vertical-align: ;  
90. 色: ;  
92. 背景: ;  
93. ;  
94. 背景画像: ;  
95. 背景リピート: ;  
96. 背景の位置: ;  
98. 不透明度: ;  
99. カーソル: ;  
100. 内容: ;  
101. 引用: ;  
102. }

アンディの順序は、fantasai が推奨する順序とほぼ一致していますが、細部はより操作しやすくなっています。
SitePoint には非常に活発なディスカッション スレッドもあります: 宣言ブロック内でプロパティをどのように並べますか?

ファンタジーとアンディの書き込み順序は気に入っていますが、ファンタジーの順序では "self" 属性が少し異なります。あいまいで、アンディは詳細すぎて思い出すのが困難です。 CSS 2.1 仕様の CSS プロパティの分類から学んで、Andy の順序を少し調整できると思います。

1. ドキュメント フローに影響を与えるプロパティ (表示、位置、フロート、クリア、可視性、テーブル レイアウトなど) .)
2. 独自のボックス モデルのプロパティ (幅、高さ、マージン、パディング、境界線など)
3. 植字関連のプロパティ (フォント、行の高さ、テキスト整列、テキストなど) -インデント、垂直揃えなど)
4. 装飾属性 (色、背景、不透明度、カーソルなど)
5. コンテンツ生成属性 (コンテンツ、リスト スタイル、引用符など)

次の問題のように、物事は決して単純ではありません:

1. 速記にどう対処するか?たとえば、 border: 1px sold red; ここで、border-width はボックス モデルに関連しますが、border-color は装飾的なものです。どのように整理すればよいでしょうか？
2. 肌の変更機能を考慮すると、色、背景、境界線の色などの色に関連するアイテムはまとめられるべきですか?将来の変更を容易にするため。
3. ハッキングにどう対処するか? CSS ファイルの最後に単独で置くのが良いでしょうか、それともハック属性の隣に置くのが良いでしょうか?
4. 同僚の CSS ファイルを管理する場合、新しく追加または変更された属性についてどのようにコメントすればよいですか?書き方？
5. また、CSS Sprite を考慮して、背景画像セレクターはすべてまとめて配置されますか?ただし、CSS セレクター内のプロパティの順序と構成については、この記事の範囲を超えています。
6. さらに議論するのは、CSS ファイル内の構造的な構成と、複数の CSS ファイルの構成です。


CSS 命名規則:

CSS には、他のプログラムと同様に、グローバル効果とクラスローカル効果を持つスコープの概念があります。

例:

p{background:#f00;}/* Scope: global*/

.div p{color:#000;}/* Scope: inside div class*/

はじめに いくつかの書き方の比較CSSのメソッドと重み

1) ラベル: 重み値が0,0,0,1

2) クラス: 重み値が0,0,1,0

3) 属性選択: 重み値が0,0 ,1,1

4) ID:重みの値は0,1,0,0

5)重要な重みの値は1,0,0,0まで

CSSを書いているときはそう思う, プロジェクトが比較的大きく、多くのコンテンツが含まれている場合、名前付けは頭の痛い問題であり、ブロックでさまざまな状態のスタイルを表現する必要があるため、名前付けルールをマスターすることは、少ない労力でより効率的に作業できる強力なツールです。おおよそ次のとおりです: (転載元: http://www.cssforest.org/blog /index.php?id=143, you can go here to read more Technical Articles)

次のようなときに名前の意味が失われないようにするためです。状態が変化する場合、最も一般的なのは、「left」や「right」など、レイアウトに使用されるクラス名です。左の列が左の列でなくなると、「left」という名前は実質的な意味を持ちません。これは「意味のある名前を付ける」という私たちの推奨に反しており、シリアル番号を使用することにはさらに問題があります。それは本当のようですが、長い間私を悩ませてきた問題がありました。同じモジュールがページ内に複数回表示され、詳細が異なる場合、後続のモジュールの名前は何と呼ぶべきですか? 「１」と「２」って連番じゃないの？実際、状態 (パフォーマンス) が変化しても、対応する定義済みのクラス名の意味が失われることは避けたい状況です。

いわゆるステータス (パフォーマンス) が変化する状況はいくつかあります。

1. HTML は変更されず、スタイル定義が変更されます。 「red」や「font14」など、ある状態を表す名前を使用すると、必然的に定義とネーミングに齟齬が生じ、その後の影響が比較的大きくなります。
2. スタイル定義は変更されませんが、HTML は変更されます。 HTML の変更は、クラス名を置き換えることができることを意味します。つまり、クラス名に特定の状態を表す名前が使用されている場合、変更がより容易になります。
3. スタイル定義と HTML の両方が変更されました。最初のシナリオのような結果にならないように考慮してください。

実際の状況は、単に特定の状況ではなく、状況が混在していることが多い。
ルール

[モジュールプレフィックス] _ タイプ _ (関数 | ステータス) n _ [位置 n]

凡例の説明:

* (必須): 存在する必要があります。
* [オプション]: ニーズに応じて選択できます。
* |: 複数の中から 1 つを選択します。
* n: 複数存在する可能性があります。

名詞の説明:

モジュール接頭辞
モジュールを定義するときに使用される接頭辞。
Type
クラスのコンテンツタイプを定義します。入力ボックス、テキスト、段落など。
関数
型を補完するために使用されるクラスの関数を定義します。
ステータス
クラスのステータスを定義し、型を補足するために使用されます。
位置
ホームページ、ナビゲーションなど、クラスで使用される場所を定義します。 left や right などの単語の使用は除外されませんが、可能な限り避けるべきです。
* 各項目は独自の略語リストを持つことができ、同じ名前の略語は可能な限り統一する必要があります。
※状態が変化したときに名前の意味が失われないように、特定の状態（色、大きさなど）を詳細に表現しない言葉を選択してください。
* 数字で始まらない小文字 (a ～ z) と数字 (0 ～ 9) で構成されます。
* クラス (.class) の再利用性とオブジェクト (#id) の一意性を確保するため、id に予約語を使用しないでください。

例:

Java コード

1. モジュールプレフィックス:
3. * ポップアップポップ
4. * パブリックグローバル, gb
5. * タイトル title,tそれ
6. * ヒントヒント
7. * メニューメニュー
8. * 情報 info
9. * プレビュー pvw
10. * ヒント ヒント
11. * ナビゲーション ナビ
13. タイプ:
15. * ボタン bt
16. * テキスト TX
17. * 段落p
18. * アイコンアイコン
19. * 入力入力
20. * カラー color,c
21. * 背景 bg
22. * 境界線
24. 機能:
26. * 設定設定
27. * 追加追加
28. *デル
29. * オペレーション
30. * パスワード
31. * インポート株式会社
33. ステータス:
35. * 成功 成功
36. * 失敗 損失
37. * 透明なトランス
39. 場所:
41. * パブリック GB
42. * ボーダーバー
43. * 段落p
44. * ポップアップポップ
45. * タイトルタイトル、ティット
46. * メニューメニュー
47. * コンテンツ継続
48. * ナビゲーションナビゲーション

中国語説明ネーミング
文字入力box.input_tx 段落文字色.c_tx_p
パスワード入力box.input_pw アルバムポップアップ設定layer.pop_set_photo
ログインパスワード入力box.input_pw_login ログ設定成功プロンプト.hint_ suc_blogset
文字色。 publichint.hint_gb

いくつかの簡単な質問をすると、名前を付けることができます:

1. 「どのような種類の定義ですか?」?? それは入力ボックスです。
2.「型の補足説明」?? 単語の説明がわかりにくい場合は、型、テキスト入力ボックス、input_txの補足説明をします。
3.「どこで使用しますか？」?? 使用する場所はどこですか?ホームページ上の検索テキスト入力ボックス、input_search_index。

「モジュール化」関連の定義方法と組み合わせると、実際には、定義する必要がある名前はそれほど多くありません。 例: 「hint_tx」はプロンプト モジュールのテキスト定義を表し、「hit_tx_hint」はプロンプト内のテキストの強調の定義を表します。色を変更するか太字にするかは、さまざまなプロンプト モジュールのニーズによって異なります。 。