はじめに:
女の子はみんな服を買うのが好きで、私も例外ではありませんが、財布が薄すぎて高級なカスタマイズをする余裕はありません。でも、私の場合は、高確率でカジュアルな服しか買えません。 、私はまだ幸せです、結局のところ、服を買うのは服だけでなく気分も重要です。 Webフロントエンドの世界でもCSSは人生の芸術に満ちています。芸術は人生から生まれると言われますが、それは人生の昇華です。個人的にはどうですか、それともモジュール式の大量生産はどうですか?これは各プロジェクトによって異なります。すべてが学位と切り離すことはできません。世の中に最適なものはありません。これは Web フロントエンドの世界にも当てはまります。
自分の小さなブログを運営しているだけの場合は、自分自身の個性を持つ必要があります。ブログは個人的な承認に相当するため、その多くはパーソナライズされており、自分に合ったブログをゆっくりと作成する必要があります。のスタイル。しかし、ほとんどの場合、仕事では、全員が協力してできるだけ早く完了する必要があるという 2 つの言葉を考慮する必要があります。これには、全員が共通の考え方を必要とします。標準には共有ライブラリがあり、これはパーソナライズされたコードではなく、チーム メンバーが読みやすく保守しやすいエレガントなコードです。 CSSのモジュール性はあらゆる側面に関わるので、少しずつその謎を解き明かしていきます!この記事では、まず名前について説明します。
主要記事:CSS モジュール性の概念を理解するには、まずモジュール性とは何かを理解します。Baidu Encyclopedia の説明では、モジュールはシステムの構造において、結合、分解、置換できる単位であると説明されています。モジュール化は、複雑なシステムをより管理しやすいモジュールに分解する方法です。さまざまなコンポーネントにさまざまな機能を設定し、問題を複数の小さな独立した相互作用するコンポーネントに分解することで、複雑で大規模なソフトウェアを処理できます。モジュール性を理解すると、大きな絵を小さな絵に分割し、小さな絵を組み立てて大きな絵を作り、分割と組み合わせの芸術的な感覚を生み出すことができます。次に、CSS モジュールのアイデアは、CSS 作成環境でモジュールのアイデアを使用して、大規模なプロジェクトを独立したコンポーネントに分解することです。最終的に、モジュールが組み立てられ、プロジェクトが完成します。
コード再利用率の向上
開発効率の向上、通信コストの削減
ページ許容度の向上結合コストの削減
迅速な反復のより良い実装
コードのメンテナンスが簡単
。 。 。 。 。 。
CSSモジュール化を実装するにはどうすればよいですか? (方法)
CSSのモジュール化を実現するには多くの手順が必要ですが、今日は最初のステップである名前付けについてお話します。
css命名の最適化は、cssファイル名の命名とcssセレクターの命名に分けられます。
css スタイル ファイル名:
1)
columns.css
text font.cssprint style print.css
主題.css
2)
リセット。 css // ブラウザのデフォルトのスタイルをリセットします
typeset.css // グラフィックとテキストを配置します
color.css // カラーマッチングの管理を統一しますprint.印刷効果スタイル
ie.css // IE 用の個別のハック
3)
reset.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 セレクターの名前付けの標準化は、モジュール実装の一部であるだけでなく、互換性の問題も回避できます。各ブラウザ、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 の結果は次のように一致します。
上から さまざまなブラウザーでのセレクター名のサポートが異なることは直感的に理解できます。したがって、セレクターの名前が統一されていないと、さまざまなブラウザーでのレンダリング効果に影響します。上記のブラウザとの互換性を確保し、手間を省くために、文字で始まる名前を付けるようにしています。すべて互換性があることが保証されています。
ヘッダー: ヘッダー
コンテンツ: コンテンツ/コンテナー
テール: フッター
ナビゲーション: 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 { }
注意事项::
我比较喜欢bootstrap的简洁优雅的风格。所以css命名也可以参考一下。
css编码规范可以参考http://codeguide.bootcss.com/
非常高兴能跟大家一起分享,一起学习,今天就写到这里了,因为本人水平有限,有错误的地方,欢迎指正,谢谢啦!---妙瞳。