フロントエンド コーディングの 9 つの標準ベスト プラクティス: CSS_html/css_WEB-ITnose

フロントエンド エンジニアは、標準のフロントエンド コードを書くことを非常に重視しています。これらのベスト標準プラクティスは、権威ある組織によって公開されるものではありませんが、コードの読みやすさ、保守性、パフォーマンスを向上させることを目的として、実践プロセスにおいて多数のフロントエンド エンジニアによって要約されています。前回の記事に引き続き、CSS コードの標準的な実践方法について説明します。

1、名前付け

他の言語仕様と同様、CSS の名前付けでも意味のある名前にする必要があります。名前はできるだけ短く、名前付きの単語はハイフンで接続して意味を表現するのに十分である必要があります。

不規則な命名:

1 #navigation{2 }3 .demoimage{4 }5 .error_status{6 }

標準の命名:

1 #nav{2 }3 .demo-image{4 }5 .error-status{6 }

2、CSS セレクター

異なるタグタイプはできるだけ同じ CSS クラス名を使用しないようにしてください。 css クラス名と ID は、CSS を定義するのに十分です。ID は Dom 要素を一意に決定できるためです。また、CSS クラスは異なるタグには推奨されません。また、ID の一意性によって ID セレクターの定義は慎重に使用する必要があります。定義された CSS は再利用できません。

不規則定義:

1 ul#menus{2 }3 div.info{4 }

標準定義:

1 .main-menus{2 }3 .info{4 }

3. 属性名と値の定義が簡略化されました

CSSの一部の属性定義は、padding、borderなど独立した項目に分割できます、マージン、背景、フォントなど、分割定義の読みやすさは向上しますが、現在の経験に基づいて、フロントエンド エンジニアはこれらの一般的に使用される CSS を十分に理解しており、マージされた定義は影響を与えません。可読性には影響しますが、コードはより簡潔になります。また、10 進数の値の後に px em cm などの単位を追加しても意味がありません。小数点は省略可能、URL 値の両端の 0 引用符は省略できます。

不規則な定義:

標準の定義:

4. CSS コードの形式

美しく統一されたコード形式は、コードの可読性と保守性を向上させることができます。最適なコード形式には主に次の点があります。定義の順序はブラウザの接頭辞に関係なく、アルファベット順です。複数のセレクターが定義されている場合、定義はセミコロンの後にスペースが追加されます。定義 ラインを所有する。

border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;margin: .8em;background: #00FF00 url(bgimage.gif) no-repeat fixed top;

5. 特定のブラウザと互換性のある CSS コードの作成を避ける

ここで言及する特定のブラウザとは、主に邪悪な IE シリーズのブラウザ、IE6 を指します。 , 7は特に深刻です。ブラウザの互換性の問題が発生した場合、最初に考慮すべきことは、別の解決策がないかどうかです。適切な解決策が見つからない場合は、互換性のあるコードと通常のコードを混在させないでください。これらの古いブラウザが将来サポートされない場合は、これらの個別の CSS ファイルを直接削除できます。

 1 /*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/ 2 background: fuchsia; 3 border: 1px solid; 4 -moz-border-radius: 4px; 5 -webkit-border-radius: 4px; 6 border-radius: 4px; 7 color: black; 8 text-align: center; 9 text-indent: 2em;10 11 /* http://www.cnblogs.com/sosoft/ */12 /*多个选择器定义时，每个选择器单独占用一行*/13 h1,14 h2,15 h3 {16     font-weight: normal;17     line-height: 1.2;18 }

6. 無駄な CSS コードを書かないようにするために、ブロック要素とインライン要素の違いを覚えておいてください

ブロックレベル要素はそれ自身で 1 行を占有しますが、インライン要素は 1 行を占有しません。一般的なブロック レベル要素には、div p ul ol table h1 ～ h6 などが含まれます。インライン要素には、em img input label select spam Strong textarea などが含まれます。ブロックレベル要素のデフォルトの表示スタイルはブロックですが、インライン要素の表示スタイルはインラインです。表示を再定義することで、ブロックレベル要素とインライン要素を交換できます。ただし、次の CSS スタイル (幅、高さ、垂直マージン パディング) はインライン要素には影響しないことに注意してください。したがって、これらの役に立たないスタイルをインライン要素に定義することは避けてください。

7、CSSで定義されている重みを覚えておいてください

CSSのセレクタには重みが付けられています 複数のスタイルがある場合、重みの大きいスタイルが有効になります。余談ですが、以前、多くのフロントエンドエンジニアにインタビューしましたが、最もよく聞かれた質問はCSSの重みについてでした。残念なことに、CSSの重みについて知っている人は多くありません。以下は重みのルールです: ラベルの重みは 1、クラスの重みは 10、ID の重みは 100 です。次の例は、さまざまな定義の重み値を示すものです:

1 <!--[if IE 6]>2 <link rel="stylesheet" type="text/css" href="css/ie6.css" />3 <![endif]-->4 <!--[if IE 7]>5 <link rel="stylesheet" type="text/css" href="css/ie7.css" />6 <![endif]-->

重みが同じ場合、最終的に定義されたスタイルが有効になりますが、最終的なスタイルに影響を与えるのに前後のスタイル定義のみに依存することは信頼できないため、この状況は避けるべきですまた、コードの再利用性のために、重みはできるだけ小さく定義する必要があります。これは、スタイルを定義するために ID を使用することは推奨されないのと同じです。

8，使用css reset

各个浏览器对不同的标签有其不同的内置的样式，为了使得在不同的浏览器下标签的表现相同，可以定义一个单独的base.css文件，重新定义各种标签的默认样式。另外推荐的css文件组织是：定义一个base.css，用于css reset，定义一个common.css，用于定义各种公用css类。这里有一份base.css，其实是以上提到的base.css和common.css的合并，分享给大家：base.css

9，多组合少继承

这种设计方式越来越受到大家的欢迎，各种前端框架中也能看到大量这样的设计。设计的核心思想是：把css定义中的固定部分和可变部分分开定义，使得代码达到最大程度的重用，这样的结果是增加了元素上添加的css类个数，但是提高了代码的维护性和可读性。如下的例子代码来自bootstrap的按钮样式定义

按钮有一个固定的基础样式btn

 1 .btn { 2   display: inline-block; 3   *display: inline; 4   padding: 4px 10px 4px; 5   margin-bottom: 0; 6   *margin-left: .3em; 7   font-size: 13px; 8   line-height: 18px; 9   *line-height: 20px;10   color: #333333;11   ...12   *zoom: 1;13   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);14      -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);15           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);16 }

在此基础上定义各种按钮的特定样式

 1 .btn.disabled, 2 .btn[disabled] { 3   cursor: default; 4   background-color: #e6e6e6; 5   background-image: none; 6   opacity: 0.65; 7   filter: alpha(opacity=65); 8   -webkit-box-shadow: none; 9      -moz-box-shadow: none;10           box-shadow: none;11 }12 13 .btn-large {14   padding: 9px 14px;15   font-size: 15px;16   line-height: normal;17   -webkit-border-radius: 5px;18      -moz-border-radius: 5px;19           border-radius: 5px;20 }21 22 .btn-large [class^="icon-"] {23   margin-top: 1px;24 }25 26 .btn-small {27   padding: 5px 9px;28   font-size: 11px;29   line-height: 16px;30 }31 32 .btn-small [class^="icon-"] {33   margin-top: -1px;34 }35 36 .btn-mini {37   padding: 2px 6px;38   font-size: 11px;39   line-height: 14px;40 }

另外再推荐一下bootstrap框架，在github中排名第一的前端框架，出自于twitter。