標準の命名CSS

css3がリリースされ、多くのWEBフロントエンドエンジニアがこの技術を使おうと試み始めています。 CSS を書く能力をどのように評価しますか? 私たちはそれを「良い」、「平均的」、「ひどい」などの言葉で表現することはありません。 CSS で最も難しいことは何ですか? それはコードの単純さと効率ですか? フロントエンド エンジニアの Wu Zhi はかつてこう言いました: CSS は難しい技術ではなく、標準化する方法にあります。ネーミング。プロジェクトは個人によって完了され、エンジニアは自分の習慣に従って CSS に名前を付けることができます。チームワークにおいて、不規則な名前付けは衝突を引き起こし、プロジェクト全体の進行に影響を与える可能性があります。以下では、嶺南ネットワークが標準化された方法で css に名前を付ける方法を段階的に説明します。

フォントのCSSをfont.cssに格納、色を制御するCSSをcolor.cssに格納、レイアウトを制御するCSSをlayout.cssに格納するなど、機能ごとにCSSを分割する方法はたくさんあります。またはエリアごとのブロック分割: ヘッダーの CSS を header.css に保存し、サイドバーを sidebar.css に保存します。視点が異なると、それぞれに長所と短所があります。

嶺南ネットワークでは、css 分割方法として、base.css+common.css+page.css を推奨しています。 Web サイトのすべてのスタイルは、その機能に応じて、ベース、共通、ページの 3 つのカテゴリに分類されます。Web ページの最終的なスタイル表現は、この 3 つによって完成します。

ベースレイヤーは、Webサイトのページスタイルが依存する最下位のレイヤーであり、比較的安定しており、メンテナンスはほとんど必要ありません。通常、次のコンテンツをbase.cssに保存します。

/*cssリセット 一部のタグ属性はブラウザごとにデフォルト値があるため、一部のタグ属性を統一して設定する必要がある */

body,div,dl,dt,dd,dl,ol,ul ,li ,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;}
table{border-collapse:collapse; border-spacing:0;}
ol ul{list-style:none;}

/*テキスト レイアウト*/
.f12{font-size:12px;}
.f13{font-size:13px;}
。 f14{font-size:14px;}

/*位置決め*/
.tl{text-algin:left;}
.tc{text-algin:center;}
.tr{text-algin:right }
;
/*長さ高さ*/
.w10{幅:10px;}
.h10{高さ:10px;}

/*マージン*/
.m10{マージン:10px;}
.ml10px{マージン-左:10px ;}
.p10{padding:10px;}
.pr10{padding-right:10px;}
共通層は中間層に位置し、コンポーネントレベルの CSS を提供します。ページ上の要素を、比較的独立した機能とスタイルを持つ小さな「テンプレート」に分割することができます。これらのテンプレートの中には、ほとんど繰り返されないものと、大量に繰り返されるものがあります。それを抽出して保存します。 common.css スタイルで作成します。 Web サイトで繰り返しのタイトルが多数使用されている場合は、次のように記述できます:

.h2{font-size:14px;font-weight:bold;}

ページ レイヤーはすべてのページ レベルであることが推奨されます。レイヤー CSSはpage.cssに格納されており、ページに応じてコメントを追加したり、メンテナンスを容易にするためにブロックで記述したりできます。例:

/*会社概要*/
.about-text{font-size:12px;}

/*連絡先情報*/
.contact-text{font-size:14px;}
ベースレイヤーは基本的にはメンテナンスの必要はありません。ページ層のコードは複数のエンジニアによって共同開発される可能性があります。では、名前付けによって競合を回避するにはどうすればよいでしょうか。 CSS の命名は、キャメルの命名と下線の命名として標準化できます。ラクダの命名法: 2 番目の単語から始めて、各単語の最初の文字を大文字にします。 DropMenu、subNavMenu など。下線の命名法: ダッシュ - または下線 _ で区切られます (drop-menu、sub_nav_menu など)。

プロジェクトが複数のエンジニアによって完了する場合、各人に独立したネーミングIDを割り当てることができます。たとえば、嶺南ネットワークは linknan と呼ばれ、.ln-artice li のように、名前の先頭の 2 文字を独立した名前付け ID として割り当てることができます。これにより、名前の繰り返しによって生じる競合が回避されます。