私のフロントエンドのコードの習慣——css編
IDとClassネーミングスタイル
1.idとclassの命名の総規則は:内容が優先し、補助として表現される.12216;まず内容に基づいて名前を付け、main-navのようにします.コンテンツに応じて適切な名前が見つからない場合は、skin-blue、present-tab、col-mainなどの表現を組み合わせて決定することができます.
2.意味のあるidとclass名を使用します.
/* Not recommended: meaningless */
#yee-1901 {}
/* Not recommended: presentational */
.button-green {}
.clear {}
/* Recommended: specific */
#gallery {}
#login {}
.video {}
/* Recommended: generic */
.aux {}
.alt {}3.できるだけ短く、理解しやすいようにしなければならない.
/* Not recommended */
#navigation {}
.atr {}
/* Recommended */
#nav {}
.author {}4.必要でない限り、idまたはclassの前に要素名を付けないでください.そうしないと、セレクタの効率が低下します.
/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}5.できるだけCSSの中で簡単に書くことができる属性(例えばfont)を使って、符号化の効率とコードの可読性を高めることができる.
/* Not recommended */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Recommended */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;6.接頭辞付きネーミングスペースを使用すると、ネーミング競合を防止し、コードのメンテナンス性を向上させることができます.
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
ID Class
。
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}7.id下線を使用して接続する.例えばproduct_title.classは、product-listsなどのアプリケーション文字を接続します.これにより、区別が容易になり、スクリプトのデバッグに役立ちます.
8.idとclass名には26文字の英字、数字、下線''しか表示されません.コネクタ'-'は、他の文字は使用できません.できるだけ英いくつかの製品の特定の語彙については、アプリケーションを使用することもでき、他の場合、アプリケーションを使用しないこともできます.
CSSフォーマット仕様
1.書く順序:CSSを属性の頭文字の順序で書くのは読みやすくてメンテナンスしやすくて、並べ替える時ブラウザの接頭辞を持つ属性を無視します.
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;2.ブロックレベルのコンテンツのインデント:階層関係を反映し、可読性を向上させるために、ブロックレベルのコンテンツをインデントする必要があります.
@media screen, projection {
html {
background: #fff;
color: #444;
}
}3.声明の終了:各行のCSSはセミコロンで終わるべきである.
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}4.属性名と値の間にスペースが必要です.
/* Not recommended */
h3 {
font-weight:bold;
}
/* Recommended */
h3 {
font-weight: bold;
}5.スタイルブロックの区切りを宣言:セレクタと{}の間にスペースで区切ります.
/* Not recommended: missing space */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
margin-top: 1em;
}
/* Recommended */
#video {
margin-top: 1em;
}6.各セレクタは別の行に進みます.
/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}7.ルール間は空行で区切られています.
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}8.属性セレクタと属性値は一重引用符で、URIの値には引用符は必要ありません.
/* Not recommended */
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}9.css expressionを適用せず、複雑なフィルターを使用せず、できるだけ容器の高さを設定せず、容器の高さを適応させる.いくつかの並べ替えられたブロックが高さを等しくする必要がある以外は.height:100%;またはheight:1%;互換性の問題が発生する可能性があります.9.値が0の場合は単位を追加しません.
margin: 0;
padding: 0;10.値が-1と1の間にある場合は、0を追加する必要はありません.
font-size: .8em;11.16進法
/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;CSSメタルール
1.セグメント注釈:注釈でCSSを各部分に分ける.
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}最適化ガイド
ブラウザがセレクタを読み込む順序は、右から左に進みます.セレクタの一番右の部分は「キーセレクタ」と呼ばれ、セレクタの効率を決定します.したがって、特定のキーセレクタほどパフォーマンスが向上します.セレクタの効率をソートする場合は、次のようになります.
2.セレクタはHTML構造にあまり依存してはいけません.1つのモジュールの構造が順序を変換したり、新しい機能を追加したりした場合、既存のスタイルに影響を与えないでください.
3.CSS 3の各種属性と位置選択器は便利であるがマッチング性能が低くHTML構造に依存しすぎているため、できるだけ少なく使用し、クラス名を適用して代用する
4.クラス名またはID名の前に署名またはクラス名を付けないでください.そうしないと、セレクタの効率が低下します.
5.HTML構造が固定されており、セレクタ間が親子関係であると確信している場合は、低バージョンIEブラウザを考慮せずに>(サブエレメントセレクタ)を付けることができます.
6.CSSルールでは、できるだけ少ないレベルの子孫セレクタを使用します.レベルが多ければ多いほどマッチングが遅くなり、HTML構造に依存するため、3つ以上のレベルを超えないほうがいいです.一部のレベルのセレクタは、ul liのように、一般的に前のulを省く必要はありません.
7.SCSSレベルの書き方は、ネストされたレベルをより便利にするためではなく、親のネーミングスペースをより便利に使用するためです.
8.CSSはモジュール化の開発を主とすべきで、特に1つの独立した機能のコンポーネント、同一の機能とテンプレートの様式は一緒に書くべきで、そして同一の親セレクタを継承して、1つの良好なネーミング空間を創造して、この機能モジュールのコードを取り出して独立して使用することができるようにする
.panel{}
.panel-header{}
.panel-body{}
.panel-footer{}9.各セレクタの各種スタイルは積層可能であるが、既存のスタイルにできるだけ影響を及ぼさないことを考慮し、各ラベルのデフォルトスタイルをできるだけ適用し、存在しないスタイルをリセットしないで、再利用性が悪いようにしなければならない.簡単な例を挙げると、h 1-h 6のデフォルトの太字スタイルは、次回適用するときに太字スタイルで上書きされないように、スタイルで除去しないでください.
10.元の継承関係を利用してスタイルを少なくすることができ、スタイルを書き換える必要がある場合、アプリケーションセレクタの重み関係は適用しないでください.important.
11.なるべく使わないように!importantは既存のCSS継承関係を乱し、より多くの重みスキームの章は参照できます.http://www.w3cplus.com/css/cs...
12.異なる状態のリンクスタイルを表示したい場合は、link-visited-hover-activeの順序を覚えたり、LVHAと略記したりします.
14.使用できないスタイルを書かないで、定期的にスタイルシートのスタイルを調べて、スタイルシートがますます肥大化しないようにしなければならない.
15.IDセレクタの効率は最も高いが、スタイルシートにはセレクタとしてIDを使用しないことを推奨する.重みが高いため、アプリケーションに残しておくべきであり、JSインタフェースに残しておくべきである.
16.状態を同時に変更する必要がある1組の要素については、1つの要素ごとにスタイルを付けないでください.
.parent-class .a.active {}
.parent-class .b.active {}
.parent-class .c.active {}
：
.parent-class.active .a {}
.parent-class.active .b {}
.parent-class.active .c {} 17.htmlおよびbodyセレクタを
CSSバグ方式
1.CSSが正しいか確認する
、 } 。 CleanCSS CSS 。 CleanCSS CSS ， 。
2.border属性を利用してエラー要素のレイアウト特性を確定する
float position 。 border background ， 。
3.各種の仮想マシンプラットフォームを利用して各IEバージョンの効果をテストする
4.第3の方法を利用してプロセス或いはブラウザベルトのデバッグプロセスをテストする
IE6、IE7 IE developetoolbar V2/IE webdeveloper。Microsoft script Editor，IE8+ ， IE7 。FF Firebug， chrome safari