ウェブサイトのページ構築: CSS 命名を標準化する方法を教える

CSS3がリリースされ、多くのWEBフロントエンドエンジニアがこの技術を使おうとし始めました。 CSS を書く能力をどのように評価するのでしょうか? 正しいか間違っているかで判断するのではなく、「良い」「平均的」「悪い」などの言葉を使うかもしれません。 CSS で最も難しいことは何でしょうか? 主要ブラウザとの互換性でしょうか? コードのシンプルさと効率性でしょうか? フロントエンド エンジニアの Wuzhi 氏はかつてこう言っています。「CSS は難しい技術ではありません。難しいのは、それを標準化された方法でどのように命名するかです。」プロジェクトは個人で完了し、エンジニアは自分の習慣に従って CSS に名前を付けることができます。チームワークにおいて、非標準の命名は競合を引き起こし、プロジェクト全体の進行に影響を与える可能性があります。以下では、Lingnan Network が標準的な方法で CSS に名前を付ける方法を段階的に説明します。

CSS を分割する方法は多数あります。たとえば、機能別に分割すると、フォント CSS は font.css に保存され、色制御 CSS は color.css に保存され、レイアウト制御 CSS は layout.css に保存されます。また、ブロック別に分割すると、ヘッダー CSS は header.css に保存され、フッター CSS は footer.css に保存され、サイドバーは sidebar.css に保存され、テーマは main.css に保存されます。角度によってそれぞれ長所と短所があります。

Lingnan Network は、CSS 分割方法 (base.css+common.css+page.css) を推奨しています。ウェブサイトのすべてのスタイルは、その機能に応じて、ベース、共通、ページの 3 つのカテゴリに分類できます。ウェブページの最終的なスタイルは、この 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{width:10px;} .h10{height:10px;} /*余白*/ .m10{マージン:10px;} .ml10px{左マージン:10px;} .p10{パディング:10px;} .pr10{右パディング:10px;}

共通レイヤーは中間レイヤーにあり、コンポーネント レベルの CSS を提供します。ページ内の要素を、比較的独立した機能とスタイルを持つ小さな「テンプレート」に分割できます。これらのテンプレートの中には、めったに繰り返されないものもありますが、頻繁に繰り返されるものもあります。頻繁に繰り返されるスタイルを抽出し、common.css スタイルに保存できます。ウェブサイトでタイトルを何度も繰り返し使用する場合は、次のように記述できます。

.h2{フォントサイズ:14px;フォントの太さ:太字;}

ページレイヤーはページレベルにあります。ページレイヤーの CSS はすべて page.css に保存することをお勧めします。ページに応じて注釈を付けることができ、メンテナンスしやすいようにブロックで記述できます。のように：

/*会社概要*/ .about-text{font-size:12px;} /*お問い合わせ先*/ .contact-text{font-size:14px;}

ベースレイヤーは基本的にメンテナンスの必要がなく、共通レイヤーはあまり変更されず、ページレイヤーのコードは複数のエンジニアによって共同開発される可能性があります。では、競合を回避するにはどうすればよいでしょうか。名前付けによって競合を回避できます。 CSS 命名規則には、キャメルケースとダッシュケースがあります。キャメルケース: 2 番目の単語から始めて、各単語の最初の文字を大文字にします。たとえば、dropMenu、subNavMenu など。ダッシュ命名方法: ハイフン (-) またはアンダースコア (_) を使用して区切ります (例: drop-menu、sub_nav_menu)。

プロジェクトが複数のエンジニアによって完了する場合、各人に固有の命名IDを割り当てることができます。たとえば、Lingnan Network が linknan という名前である場合、名前の最初の 2 文字を独立した命名 ID として割り当てることができます (例: .ln-artice li)。これにより、重複した名前の競合を回避できます。

上記の経験は、皆さんにインスピレーションを与えるためのものであり、皆さんがそれを実践できることを願っています。この記事はLingnan Network http://www.linknan.com から公開されています。転載の際はリンクをそのままにしておいてください。

元のタイトル: ウェブサイトのページ構築: CSS 命名を標準化する方法を教える

キーワード: ウェブサイトのページ、表面構造、教える、方法、標準化、名前、CSS、CSS3、公開、ウェブマスター、ウェブサイトのプロモーション、収益化