CSSコード仕様の共有

CSS を学習する過程で、CSS の学習は難しくないことがわかりますが、大規模なプロジェクトでは管理が難しくなります。プログラマーによって書き方が大きく異なるため、チームで作業する場合のコミュニケーションが困難になることがあります。したがって、CSS コードの記述標準が存在します。

1. リセットは使用しますが、グローバル リセットは使用しません

ブラウザごとに要素のデフォルト属性が異なります。ブラウザの互換性を実現するために、ブラウザ要素のデフォルト属性の一部をリセットするには、リセットを使用します。ただし、グローバル リセットは使用しないでください:

*{ margin:0; padding:0; }

これは、遅くて非効率な方法であるだけでなく、いくつかの不要な要素のマージンとパディングもリセットする原因となるためです。 YUI Reset と Eric Meyer の実践を参照することをお勧めします。私も Eric Meyer と同じ意見です。リセットは静的ではありません。ブラウザーの互換性と操作の利便性を実現するには、プロジェクトのさまざまなニーズに応じて適切な変更を行う必要があります。私が使用するリセットは次のとおりです:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2. 良い名前付けの習慣

乱雑なコードや意味論的ではない名前のコードは、間違いなく誰でも気が狂うでしょう。次のコードのように:

.aaabb{margin:2px;color:red;}

初心者でも実際のプロジェクトでこのようなクラス名を付けることはないと思いますが、このようなコードにも非常に問題があると考えたことはありますか:

<h1>My name is <span class="red blod">Wiky</span></h1>

問題は、元の赤いフォントをすべて青に変更する必要がある場合、スタイルが次のようになるということです。

.red{color:bule;}

このような名前付けは非常に複雑になります 同じサイドバーに同じ名前が付いているのは不可解です.leftBar を右側のサイドバーに変更する必要がある場合、非常に面倒になります。したがって、要素の特性 (色、位置、サイズなど) をクラスや ID の名前に使用しないでください。#navigation{...}、.sidebar{... などの意味のある名前を選択できます。このように、これらのクラスまたは ID を定義するスタイルをどのように変更しても、それらと HTML 要素の間の接続は影響を受けません。

別の状況があります。一部の固定スタイルは、定義後に変更されません。その場合、名前を付けるときに前述の状況を心配する必要はありません。たとえば、

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

then forこのような段落

<p class="alignleft">我是一个段落！</p>

この段落を元の左揃えから右揃えに変更する必要がある場合は、その className を alignright に変更するだけで済みます。

3. コードの省略形

CSS コードの省略形を使用すると、コードの記述速度が向上し、コードの量が合理化されます。 CSS では、margin、padding、border、font、background、color 値など、省略できるプロパティが多数あります。コードの省略形を学習すると、次のような元のコード:

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

を次のように省略できます:

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

これらの属性を省略する方法について詳しく知りたい場合は、「一般的な CSS 省略構文の概要」を参照するか、CSS-Shorthand-Cheat-Sheet.pdf をダウンロードしてください。

4. CSS 継承を使用する

ページ上の親要素の複数の子要素が同じスタイルを使用する場合、親要素に同じスタイルを定義し、それらの子要素にこれらのスタイルを継承させることが最善です。 CSS スタイル。こうすることで、コードを適切に保守し、コードの量を減らすことができます。元のコードは次のようになります:

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

は次のように短縮できます:

#container{ font-family:Georgia, serif; }

5. 複数のセレクターの使用

複数の CSS セレクターを 1 つにマージできます (存在する場合)。が一般的なスタイルです。そうすることで、コードが簡潔に保たれるだけでなく、時間とスペースも節約されます。例:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

は

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6 にマージできます 適切なコード コメント

コード コメントにより、他の人がコードを読みやすくなり、コード コメントを合理的に整理できるようになります。構造をより明確にすることができます。スタイル シートの先頭にディレクトリを追加することを選択できます。

/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  ----------------------------------- */

これにより、コードの構造が一目で明確になり、コードを簡単に検索して変更できます。

コードの主要なコンテンツも適切に分割し、必要に応じてコードにコメントを追加する必要があります。これはチーム開発にも役立ちます:

/***    Header  ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}
 
/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
 
/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. CSS コード

コード内のプロパティをアルファベット順に並べ替えることができれば、修正箇所をより速く見つけることができます:

/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8. CSS を読みやすくする

書き込みを読みやすくするCSS を使用すると、スタイルの検索と変更が簡単になります。次の 2 つのケースのどちらが読みやすいかは自明だと思います。

/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}
 
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

スタイル属性の少ない一部のセレクターについては、次の行を書きます:

/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

このルールに厳密なルールはありませんが、どの方法で使用しても問題ありません。 、私の提案は、常にコードの一貫性を保つことです。属性が多い場合は複数行に分けて記述しますが、属性が3つ未満の場合は1行で記述できます。

9. より適切なスタイル属性値を選択する

CSS の一部の属性は、異なる属性値を使用します。効果は似ていますが、次のようなパフォーマンスの違いがあります。

違いborder:0 はボーダーを 0px に設定します。ページには表示されませんが、ボーダーのデフォルト値に従って、ブラウザーはボーダー幅/ボーダーカラーをレンダリングします。つまり、メモリ値は占領されている。

And border:none はボーダーを "none" (つまり、何も存在しません) に設定します。ブラウザが "none" を解析するとき、レンダリング アクションは実行されません。つまり、メモリ値は消費されません。したがって、 border:none;

を使用することをお勧めします。同様に、display:none はオブジェクト ブラウザを非表示にし、レンダリングせず、メモリも占有しません。そして可視性：隠された意志。

10. 使用2cdf5bf648cf2f33323966d7f58a7f3f代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

11. 使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

或

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用2cdf5bf648cf2f33323966d7f58a7f3f导入外部样式表：

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

13. 代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

相关推荐：CSS教程

以上がCSSコード仕様の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。