CSSの書き方の仕様とorder_html/css_WEB-ITnose

CSSの書き込み順序

1. 位置属性 (position、top、right、z-index、display、floatなど)
2. サイズ (幅、高さ、パディング、マージン)
3. テキストシリーズ(フォント、行) -height)、letter-spacing、color-text-alignなど)
4. 背景(背景、ボーダーなど)
5. その他(アニメーション、トランジションなど)

CSS記述仕様

CSS 省略プロパティを使用する

一部の CSS プロパティ パディング、マージン、フォントなどを省略することができ、コードを簡素化し、ユーザーの読書体験を向上させることができます。

小数点の前の「0」を削除します

名前の短縮

多くのユーザーはクラス名を短縮することを好みますが、名前を短縮する前に人々が名前を理解できる場合に限ります。

16 進数のカラー コードの省略形

一部のカラー コードは省略できますが、ユーザー エクスペリエンスを向上させるために、できる限り省略するよう努めます。

ハイフン CSS セレクターの命名規則

1. 長い名前やフレーズでは、セレクターの名前にハイフンを使用できます。

2. CSS セレクターの名前に「_」アンダースコアを使用することはお勧めできません。

入力時に Shift キーを 1 つ少なく押す; ブラウザーの互換性の問題 (IE6 では無効な _tips セレクターの名前の使用など) JavaScript の変数の名前を区別できる (JS 変数の名前には「_」が使用されます)

ダッシュの詳細な説明はこちらの記事ですとアンダースコア、英語: クリックして中国語版を表示: クリックして表示

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

ID は JS 内で一意であり、複数回使用することはできませんが、クラス セレクターは繰り返し使用できます。 ID はクラスよりも優先されるため、ID は必要に応じて使用する必要があり、悪用しないでください。

セレクターに状態プレフィックスを追加する

場合によっては、セマンティクスを明確にするために、セレクターに状態を示すプレフィックスを追加できます。たとえば、以下の図では「.is-」プレフィックスが追加されています。

CSS 命名規則（ルール）

よく使われる CSS 命名規則

ヘッダー: header
コンテンツ: content/container
Tail: footer
Navigation: nav
Sidebar:sidebar
Column: column
ページ全体の周辺制御 ?局幅: ラッパー
左右中央
ログインバー: ログインバー
ロゴ: ロゴ
広告: バナー
ページ本文: メイン
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
サブナビゲーション: subnav
メニュー: menu
サブメニュー: サブメニュー
検索: 検索
フレンドリーリンク: friendslink
フッター: footer
著作権: copyright
スクロール: スクロール
コンテンツ: content
タグ: タグ
記事リスト: list
プロンプトメッセージ: msg
ヒント: ヒント
コラムタイトル: title
参加: joinus
ガイド: guide
サービス: service
登録: regsiter
ステータス: status
投票: vote
パートナー: パートナー

コメント書き込み:

/* ヘッダー */
コンテンツ領域
/* 終了ヘッダー */

IDの命名:

1) ページ構造

コンテナ: コンテナ
ヘッダ: header
コンテンツ: content/container
ページボディ: main
フッタ: footer
ナビゲーション ：nav
サイドバー:sidebar
カラム: column
ページ周辺コントロール全体の幅: ラッパー
左右中央: 左右中央

(2) ナビゲーション

ナビゲーション: nav
メインナビゲーション: mainnav
サブナビゲーション: subnav
トップナビゲーション: topnav
サイドナビゲーション: Sidebar
左側のナビゲーション: leftsidebar
右のナビゲーション: rightsidebar
メニュー: menu
サブメニュー: submenu
タイトル: title
概要: 概要

(3) 機能

フラグ: ロゴ
広告: バナー
ログイン: ログイン
ログインバー: ログインバー
登録: 登録
検索: 検索
リボン: ショップ
タイトル: タイトル
参加: joinus
ステータス: status
ボタン: btn
スクロール: スクロール
ページ: タブ
記事リスト: list
プロンプトメッセージ: msg
現在: 現在
ヒント: ヒント
アイコン: アイコン
注: メモ
ガイド: ギルド
サービス: サービス
ホットスポット: ホット
ニュース: ニュース
ダウンロード: ダウンロード
投票: 投票
パートナー: パートナー
フレンドリー リンク: リンク
著作権: copyright

注::

1. 常に小文字を使用します。

2. できるだけ英語を使用します。
3. 単語を省略しないでください。一目で理解できる言葉。

CSS スタイルシート ファイルの名前付け

Main master.css

モジュール module.css

基本的には、base.css
Layout、レイアウト、layout.css
Strategies.css
テキスト font.css
フォームフォームを共有します。 css
パッチ mend.css
印刷 print.css