優れた CSS コードを書くための 13 のヒント

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{... などの意味のある名前を選択できます。 }、.postwrap{ ...}

このように、これらのクラスまたは ID を定義するスタイルをどのように変更しても、それらと HTML 要素の間の接続は影響を受けません。

一部の固定スタイルは定義後に変更できないという別の状況もあります。その場合、

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

など、名前を付けるときに前述した状況を心配する必要はありません。 それでは、そのような段落について

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

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

3. コードの略語

CSS コードの省略形を使用すると、コードの記述速度が向上し、コードの量が簡素化されます。 CSS では、マージン、パディング、境界線、フォント、背景、色の値など、省略できる属性が多数あります。コードの省略方法を学習すると、元のコードは次のようになります:

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 つに結合できます。そうすることで、コードが簡潔に保たれるだけでなく、時間とスペースも節約されます。例:

rreee

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; }

にマージ可能 6. 適切なコードコメント

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

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

こうすることで、コードの構造が一目瞭然になり、コードを簡単に見つけて変更することができます。

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

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

7. CSS コードを注文します

コード内のプロパティをアルファベット順に並べ替えることができる場合、検索と変更がより速くなります:

/***    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; }

8. CSS を読みやすい状態に保つ

読みやすい CSS を作成すると、スタイルの検索と変更が容易になります。次の 2 つのケースのどちらが読みやすいかは自明だと思います。

りー

スタイル属性の少ないセレクターを扱う場合は、次の行を書きます:

/*** 样式属性按字母排序 ***/
p{ 
    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; 
}

このルールは難しいものではありませんが、どの方法で記述しても、コードの一貫性を常に保つことをお勧めします。属性が多い場合は、複数の行に分けて記述します。属性が 3 つ未満の場合は、1 行で記述できます。

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

CSS の一部の属性は異なる属性値を使用しますが、効果は似ていますが、

などのパフォーマンスに違いがあります。

　　区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

　　而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

　　同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

　　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代码，减少文件大小，以获得更高的加载速度。

　　14. 总结

　　在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

以上が優れた CSS コードを書くための 13 のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。