CSS モジュラー思考 (1) ネーミングは技術活動_html/css_WEB-ITnose

はじめに:

女の子はみんな服を買うのが好きで、私も例外ではありませんが、財布が薄すぎて高級なカスタマイズをする余裕はありません。でも、私の場合は、高確率でカジュアルな服しか買えません。 、私はまだ幸せです、結局のところ、服を買うのは服だけでなく気分も重要です。 Webフロントエンドの世界でもCSSは人生の芸術に満ちています。芸術は人生から生まれると言われますが、それは人生の昇華です。個人的にはどうですか、それともモジュール式の大量生産はどうですか?これは各プロジェクトによって異なります。すべてが学位と切り離すことはできません。世の中に最適なものはありません。これは Web フロントエンドの世界にも当てはまります。

自分の小さなブログを運営しているだけの場合は、自分自身の個性を持つ必要があります。ブログは個人的な承認に相当するため、その多くはパーソナライズされており、自分に合ったブログをゆっくりと作成する必要があります。のスタイル。しかし、ほとんどの場合、仕事では、全員が協力してできるだけ早く完了する必要があるという 2 つの言葉を考慮する必要があります。これには、全員が共通の考え方を必要とします。標準には共有ライブラリがあり、これはパーソナライズされたコードではなく、チーム メンバーが読みやすく保守しやすいエレガントなコードです。 CSSのモジュール性はあらゆる側面に関わるので、少しずつその謎を解き明かしていきます！この記事では、まず名前について説明します。

主要記事:

CSS モジュール性の考え方とは何ですか? (何を)

CSS モジュール性の概念を理解するには、まずモジュール性とは何かを理解します。Baidu Encyclopedia の説明では、モジュールはシステムの構造において、結合、分解、置換できる単位であると説明されています。モジュール化は、複雑なシステムをより管理しやすいモジュールに分解する方法です。さまざまなコンポーネントにさまざまな機能を設定し、問題を複数の小さな独立した相互作用するコンポーネントに分解することで、複雑で大規模なソフトウェアを処理できます。モジュール性を理解すると、大きな絵を小さな絵に分割し、小さな絵を組み立てて大きな絵を作り、分割と組み合わせの芸術的な感覚を生み出すことができます。次に、CSS モジュールのアイデアは、CSS 作成環境でモジュールのアイデアを使用して、大規模なプロジェクトを独立したコンポーネントに分解することです。最終的に、モジュールが組み立てられ、プロジェクトが完成します。

CSS のモジュール化はなぜ必要ですか? (理由)

それが大規模なプロジェクトであり、複数の人が共同で開発を行った結果、お互いのコードを理解できない場合、どうすればよいでしょうか。コードは前任者によって書かれており、変更する必要がありますが、コードが結合され、変更に時間と労力がかかる場合はどうすればよいか、反復が必要な場合はどうすればよいか、問題に直面した場合はどうすればよいかなどです。全身に影響を与える巨大なコード、どうすればよいでしょうか？このとき、モジュール化された考え方が救世主となります。 CSS の記述方法は特に柔軟であり、その柔軟性により、現時点ではモジュールの分離が必要です。 CSS モジュール化のメリットは数多くあり、その一部を以下に挙げます:

コード再利用率の向上

開発効率の向上、通信コストの削減

ページ許容度の向上

結合コストの削減

迅速な反復のより良い実装

コードのメンテナンスが簡単

。 。 。 。 。 。

CSSモジュール化を実装するにはどうすればよいですか? (方法)

CSSのモジュール化を実現するには多くの手順が必要ですが、今日は最初のステップである名前付けについてお話します。

他人のコードを見るのは、相手の軍事基地に入るようなもので、中にある武器を簡単に使いたいなら、最初に武器をすべて慎重に選んでいる場合でも、その武器の名前を知る必要があります。したがって、CSS で名前を統一し、チームメンバーが一目で理解できるようにする必要があります。

css命名の最適化は、cssファイル名の命名とcssセレクターの命名に分けられます。

css スタイル ファイル名:

1)

main master.css

layout、layout.css

columns.css

text font.css

print style print.css
主題.css

2)

リセット。 css // ブラウザのデフォルトのスタイルをリセットします

layout.css // ページのレイアウトを管理します

typeset.css // グラフィックとテキストを配置します

color.css // カラーマッチングの管理を統一します

print.印刷効果スタイル
ie.css // IE 用の個別のハック

3)

reset.css

header.css // ヘッダーのすべてのスタイル

container.css // ヘッダー/下部の外側の中間領域のスタイル

フッターを除く。 css // ボトムスタイル

print.css
ie.css

4)

reset.css /*ページ スタイル リチャージ*/
header.css /*サイト全体のヘッダー スタイル*/
footer.css /*サイト全体のフッター スタイル*/
public.css /*サイト全体のパブリック モジュール スタイル* /
index.css /*ホームページ独自のスタイル*/
container.css /*レベル2以下の本体スタイル*/
print.css /*印刷スタイル*/
ie.css /*IEハック*/

など

繰り返しになりますが、最適な命名方法というものはなく、最も適切な命名方法があるだけです。主に HTML 構造とバグの迅速な発見、および他のメンバーによる修正の利便性を考慮します。

Web サイトがニュース ポータルの場合、HTML の構造は主にレイアウトであり、layout.css、columns.css、text font.css、および印刷スタイル print.css は HTML と非常によく似ているため、より適しています。そして良いフィット感。

企業の公式ウェブサイトの場合、一般的な HTML 構造には標準的な先頭と末尾があるため、3 番目のタイプが HTML 構造に最も適しています。同時に、3 番目のタイプを最適化して分類することができます。コンテナ内で common 、layout に分割すると、さらに変更が容易になります。 common については、フォントや色などの共通のスタイルをいくつか入れることができます。

完璧な人生はなく、完璧な人間もいないので、HTML レイアウトを一致させることを試みてから、各プロジェクトの内省と要約に焦点を当てることしかできません。ネズミを捕まえる人は良い猫です。

CSS セレクターの名前付け:

CSS セレクターの名前付けの標準化は、モジュール実装の一部であるだけでなく、互換性の問題も回避できます。各ブラウザ、IE、Firefox、Google、safari

、各ブラウザ、IE 製品、Firefox、safari、coogle Chrome は、不規則な命名により異なるスタイルを生成するためです。

すべての CSS 構文は例外です。 -insensitive ASCII 範囲 (つまり、[a-z] と [A-Z] は同等) は CSS の制御下にありません。たとえば、大文字と小文字を区別する属性「ID」、HTML のフォント名と「クラス」、および URI は、この仕様の範囲内にあります。特に、要素名は HTML では大文字と小文字が区別されませんが、XML では大文字と小文字が区別されることに注意してください。
CSS では、識別子 (選択範囲内の要素名、カテゴリ、ID を含む) に含めることができるのは、文字 [A-ZA-Z0-9] と ISO 10646 文字 U+00A0 高、およびハイフン (-) とアンダースコア ( _); 数字、2 つのハイフン、またはその後に続くハイフンで始めることはできません。識別子には、エスケープ文字や任意の ISO 10646 文字を数値コードとして含めることもできます (下記を参照)。たとえば、識別子「B&W?」は​​「B&W?」または「B 26W￣￣ 3F」と書くことができます。 W3C CSS2.1 のセクション 4.1.3 を参照してください。リンク アドレス: http://www.w3.org/TR/CSS21/syndata.html#characters

次のコードで: それぞれの

ブラウザの結果は次のとおりです:

ie6:

ie7

ie8

Firefox38.0.1

360 の結果、Google Chrome、safari、opera の結果は次のように一致します。

上から さまざまなブラウザーでのセレクター名のサポートが異なることは直感的に理解できます。したがって、セレクターの名前が統一されていないと、さまざまなブラウザーでのレンダリング効果に影響します。上記のブラウザとの互換性を確保し、手間を省くために、文字で始まる名前を付けるようにしています。すべて互換性があることが保証されています。

一般的に使用される CSS 命名規則

ヘッダー: ヘッダー

コンテンツ: コンテンツ/コンテナー

テール: フッター

ナビゲーション: nav

サイドバー: サイドバー

列: column

P年代周辺制御全体レイアウト 幅：ラッパー

左右中央

ログインバー: ログインバー

ロゴ: ロゴ

広告: バナー

ページ本文: メイン

ホットスポット: ホット

ニュース: ニュース

ダウンロード: ダウンロード

サブ ナビゲーション: サブナビ

メニュー: メニュー

サブメニュー: サブメニュー

検索: 検索

フレンドリーリンク: フレンドリンク

フッター: フッター

著作権: copyright

スクロール: スクロール

コンテンツ: コンテンツ

タブページ

記事一覧: リスト

プロンプト情報: msg

ヒント: ヒント

列タイトル: タイトル

参加: joinus

ガイド: ギルド

サービス: サービス

登録: regsiter

ステータス: status

投票: 投票

パートナー: パートナー

(2) ノートの書き方:

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

(3) ID ネーミング:

(1) ページ構造

コンテナ: コンテナ

ヘッダー: header

コンテンツ: content/container

ページ本体: main

フッター：footer

ナビゲーション：nav

サイドバー：sidebar

列：column

ページ周辺コントロール全体のレイアウト幅：ラッパー

左と中央：左右中央

(2) ナビゲーション

ナビゲーション: nav

メインナビゲーション: mainbav

サブナビゲーション: subnav

トップナビゲーション: topnav

サイドナビゲーション: サイドバー

左側のナビゲーション: leftsidebar

右側のナビゲーション: rightsidebar

メニュー: メニュー

サブメニュー:

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：register

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } 

（2）字体大小,直接使用”font+字体大小”作为名称,如

.font10px { font-size: 10px; } .font6pt {font-size: 6pt; } 

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; } .bottom { float:bottom; } 

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { } .barproduct { } 

注意事项::

1. 一律小写;
2. 尽量用英文;
3. 不加中杠和下划线;
4. 尽量不缩写；

我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。

 

特别是class命名：

 

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

class 名称应当尽可能短，并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

基于最近的父 class 或基本（base） class 作为新 class 的前缀。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

 

选择器

对于通用元素使用 class ，这样利于渲染性能的优化。

对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。

选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

 

css编码规范可以参考http://codeguide.bootcss.com/

 

非常高兴能跟大家一起分享，一起学习，今天就写到这里了，因为本人水平有限，有错误的地方，欢迎指正，谢谢啦！---妙瞳。