[移管] Web UIデザイン命名規則_html/css_WEB-ITnose

出典: http://blog.bingo929.com/web-ui-design-name-convention.html

1. Web サイトのデザインと基本的なフレームワーク構造:

1. 「コンテナ」は、ページ内のすべての要素がパッケージ化されている部分。この部分には、「ラッパー」、「ラップ」、「ページ」という名前を付けることもできます。

2. ヘッダー
「ヘッダー」は、Web サイトのページの先頭領域です。一般的に、Web サイトのロゴとその他の要素が含まれます。この部分には、「page-header」 (または pageHeader) という名前を付けることもできます。
3. Navbar
「navbar」は水平ナビゲーション バーに相当し、最も典型的な Web ページ要素です。この部分には、「nav」、「navigation」、「nav-wrapper」という名前を付けることもできます。
4. メニュー
「Menu」領域には、一般的なリンクとメニューが含まれています。この部分には、「subNav」、「links」という名前を付けることもできます。 ", "sidebar-main".
5. メイン
「メイン」はWebサイトのメイン領域で、ブログであればログが入ります。このセクションには、「content」、「main-content」（または「mainContent」）という名前を付けることもできます。
6. サイドバー
「サイドバー」部分には、最近更新されたコンテンツのリスト、Web サイトや広告要素の紹介など、Web サイトの二次コンテンツを含めることができます。この部分には、「subNav」、「」という名前を付けることもできます。サイドパネル「、セカンダリコンテンツ」。
7. フッター
「フッター」には、Web サイトに関する追加情報が含まれています。この部分には、「著作権」という名前を付けることもできます。

2. 注意すべき点:

1.要素にはできるだけ名前を付けるようにしてください。要素自体の機能または「意図」によってセマンティクスが実現されます。表面的な名前は使用しないでください。

例: 赤/左/大きいなど。

2. 組み合わせの命名規則:

[要素の種類]-[要素の機能/内容]

例: 検索ボタン: btn-search
ログインフォーム: form-login
ニュースリスト: list-news

3.動作要素の名前付け:

インタラクティブな動作を伴う要素には通常、通常、ホバー、クリック、訪問などのさまざまなスタイルがあり、名前付けには次のルールを参照できます:

マウスホバー:: ホバークリック: クリック 訪問: 訪問済み
:検索ボタンなど:ボタン検索、ボタン検索ホバー、ボタン検索訪問