コードをより美しくするには次のように CSS を記述します_html/css_WEB-ITnose

しばらくコードを書いた後、自分のコードがまだ少し乱雑で見にくいといつも感じるので、今は CSS スタイル シートの作成から始めて、コードの作成を標準化し始めています。

下面的内容内容参照了许多网友的例子，小编总结如下：

---

1. 命名規則の説明

• 命名規則では、大文字とアンダースコアは常に使用できません。より簡潔で意味のある英語の単語は使用できません。 1、2、3 などのシリアル番号で名前を付けます。このような名前を付ける人はいないと思います。

id はモジュールまたはページの特定の親コンテナー領域を識別するために使用されます。名前は一意である必要があります。 、勝手に新しい ID を作成しないでください;

勝手に ID を使用しないでください

• クラスは特定の種類のオブジェクトを識別するために使用され、名前は簡潔かつ簡潔でなければなりません;

• の再利用を最大化するスタイルを再利用するには、ここに共通のスタイルを記述します

  ルール名には、色 (赤/青)、位置 (左/右) およびその他の関連情報を含めないでください。特定の表示効果。表示結果のスタイルではなく、意味を込めて名前を付ける必要があります。

  場合によっては、状態を示すプレフィックスをセレクターに追加すると、完全なセマンティクスがより明確になります。たとえば、「.is-」プレフィックスは次のようになります。下の図に追加しました。 ...
• モジュール
  module.css
• 基本共通
• base.css

レイアウト、レイアウト

layout.css

Columns columns.cssテキストfont.cssformsforms.css ... ページ構造 ページペリフェラルコントロール全体のレイアウト幅ラッパーコンテナコンテナヘッダーヘッダーコンテンツコンテンツ/コンテナページ本体メインフッターナビゲーションナビサイドバー

	3. よく使われるIDの命名
構造タイプ	名前

サイドバー

左中右_l, _c, _rコラムコラムナビゲーション

ナビゲーションの種類	名前
ナビゲーション	nav
メインナビゲーション	mainbav
サブナビゲーション	サブナビ
トップナビゲーション	トップナビ
サイドナビゲーション	サイドバー
左ナビゲーション	左サイドバー
右ナビゲーション	右サイドバー
メニュー	メニュー
サブメニュー	サブメニュー
タイトル	タイトル
概要	概要

機能登録登録者ガイドギルド検索検索サービスサービスリボンショップホットスポットホットタイトル参加ステータスボタンスクロールタブ記事リストガイド

3.CSS属性编写顺序

• 显示属性：display/list-style/position/float/clear …
• 自身属性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
• 其他：cursor/z-index/zoom/overflow
• CSS3属性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
• 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

4.代码优化

好的代码必须要做到优化、精简。多余的代码将会给后期的编程带来更多的不便和资源的浪费。

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

简写命名

很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！

16进制颜色代码缩写

有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。

5.注释规范

这个一定要和html文件的注释和顺序一致，这样有助于后期代码的查找和改动。

/* Header */内容区/* End Header */

6.css hack 的使用

请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

不得不用的时候推荐使用下面的这些：

機能タイプ	名前	機能タイプ	名前
ロゴ	ロゴ	現在	現在
広告	バナー	ヒント	ヒント
ログイン	ログイン	アイコン	アイコン
ログインバー	ログインバー	メモ	メモ
タイトル	ニュース	ニュース
ジョイナス	ダウンロード	ダウンロード
ステータス	投票	投票
btn	パートナー	パートナー
スクロール	フレンドリーリンク	リンク
タブ	著作権	著作権
リスト	ヒント	メッセージ
ガイド	サイトマップ	サイトマップ

IE6	_property:value
IE6/7	*property:value
IE6/7/8/9	_property:value\9

    基本总结的也差不多了，如有漏掉的，大家提个意见，我再补上^_^