序文
プロジェクトのCSSの開始は、どのような問題に注意を払う必要があります
ファイル名の指定
小文字での水平線とファイル名を追加するための推奨方法。なぜ？このため、比較的強い可読性の、ルックスを冷却するだけでなく、このような方法でリンクとして、例えば、
// 地址: github的地址
https://github.com/wangjeaf/ckstyle-nodeなぜない小文字で変数名を加えたような方法で、小さなダッシュ：family_treeが、推奨ラクダのfamilyTree？C言語では、アンダースコアが（シフト+ - ）をノックするので、このように変数に名前を付けるが、より多くの困難が原因のようです、それは一般的に大多数の変数の名前ラクダです。
、次のコードタイプ=「テキスト/ cssの」とリンクすることはできませんCSSファイルの紹介：
<link rel="stylesheet" href="test.css">最も重要なことは内部リンクのrelは、このプロパティであるので、あなたは入力しないではなく、相対なしすることができます。
JS同じトークンが、あなたは、次のコードを入力することはできません。
<script src="test.js"></script>互換性の問題はありません。
プロパティの書き込み順
書くための属性が優先以外のカバーに加えて、ブラウザの違いはありません。順序が一貫している場合しかし、その後、一見はすぐにそれは一般的に、より重要な特性の前で行われ、それがセレクタに影響を与えるプロパティの種類を知ることができます。推奨順序の比較は次のとおりです。
あなたは良い成果を持っているのでので、私は通常はかなりそう書かれていると思うかもしれません。そして、私はルールが死んでいないと思います、そして時にはあなたは変換の中心を書くかもしれません同じように、柔軟であることができ、その後、左/トップ/サイドで書かれた側を変換し、それが一目で人を作ることができるので、私は、これは理解できると思いますあなたは何をしています。
スタイルという名前の機能を使用しないでください
一部の人々は、たとえば、スタイル名の特性を使用することを好むことがあります。
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}次に、P1 / P2 /太字フォント/右ラップなどの多数のクラス名を設定し、そのHTMLは、これはあなたが赤のフォント、次に従事すると仮定し、望ましいことではないでしょうUIは、色を変更するために、あなたは、クラス名は無用である書き込み、または右には、次に行くだろう、小さな画面内の応答性のレイアウトは、あなたは右の無用を取ります。一部の人々は、全体的なUIを少し目的と18px / 16pxに/ 14px、次の3つのクラスを書いたサイズの3種類のUIについて見つけ入れP1 / P2 / P3、クラスの異なるセットに異なるフォントサイズ。これは一見、それはかなり一般的だが、あなたは彼のhtmlを見たとき、あなたしている狂ったが、これらのP1 / P2 / P3書き込み20または30まで追加のように、混雑しました。私はあなたが書きたい場合は、その後かもしれないだけでなく、ヘルプタイトルタグは、次のように考えて：
.house-info h2{
font-size: 18px;
}
.house-info h3{
font-size: 16px;
}それはデフォルトのスタイルが存在しますので、なぜただ単に心配することはできませんタグを見出し、タイトルタグを使用しないで、フォントサイズはおそらくタイトルになることです増加するため。
クラス名は、それが、このようなサインアップ成功-トースト、要求デモ、エージェント肖像画、会社のロゴなど、表していることを論理的な意味で使用されるべきです。
いくつかのスタイルあなたが一般本当に特別な感じた場合は、そのようなclearfix、またはいくつかのアニメーション効果として、クラスとして扱うことができ、使用されるいくつかの場所がありますが、私はこれは別のクラスなど、より複雑かつ汎用性だと思います。しかし、まだ名前の意義を使用する傾向があります。
ハックを使用しないでください
次のように一部の人々は、CSS方式の注意事項を書いている時点で、いくつかのハックを使用します。
.agent-name{
float: left;
_margin: 10px;
//padding: 20px;
}この方法の原理は、それらは無視されるように_ //またはCSSプロパティブラウザは//セミコロンからコンテンツに、セミコロンは属性ターミネータで、認識しないで開始する予定ですブラウザによって無視されますが、このコメントされていますあなたが喜ん//コメントを使用できるように、それは、.lessまたは.scssファイルへの.cssファイルのいずれかを提唱しません。
プロパティの始まりはIE6のためのハックです*など特定のハックに特定のブラウザもあります。いずれの場合もハックは使用しないでください。
セレクターパフォーマンス
セレクタ一般的に4つ以上書いていない、次のように、一部の人々は、カバー層のようにSASSをたくさん書き以下：
.listings-list{
ul{
li{
.bed-bath{
p{
color: #505050;
}
}
}
}}再帰クロム第1のセレクタに最後のマッチを有するが存在するので、セット上のコンテナの層、層ごとダウンセットは、七、八の下層セット限りセレクタ性能は、かなり悪いですより多くのセレクタ、長い試合は、時間が長くなり、コードの可読性が最も内側のpのスタイルタグを見るために、比較的貧弱であるので、私は層ごとアップに持っているものですここで、p見て、見て。7-8インデントコードの内部の層のルックスより疲れました。
ただ、各コンテナに書き込まずに、単に罰金を選択することが重要で、より一般的に二十から三を書き、ターゲット要素のクラスまたはIDを置くことが重要です。
最後はあなたが試合で初めて、すべてのページ上のdivの.containerのdiv {}、書く場合ので、それが右から左に一致しているので、書き込みして、選択したラベルは、、慎重に使用する必要がありあり使用は、使用する場合にのみ権利を慎重に検討を必要とする場合にそう少なくとも乱用しないで、簡単にこれを使用していない、HTMLの利点は、多くのクラスが設定されていないが、スケーラビリティは良くありません。
誤って選択避けセレクタ
時には、例えば、広すぎる書かれたセレクタがあるかもしれない、他の人のようにクラスという名前のせいか、の誰かが他の人のスタイルに影響を受け、または彼のスタイルが誤って他の人に影響を与えることはありません独自のスタイルがあるでしょう彼は彼自身のページを書きました：
* {
box-sizing: border-box;
}一般的なボックススタイルの爆弾で結果として得られる彼のページを切りました。*一方、グローバルマッチングセレクタを書いていないにかかわらず、パフォーマンスや範囲の用語のように三つのサブセレクタのセレクタとして、大きすぎます。
.house-info .key-detail .location{}内側の3つのコンテナでは、*それが適用されると、いくつかのプロパティを継承しますフォントサイズのように、3つのコンテナは、フォントサイズを持って、その後、層ごとに覆わつながります。
もう一つは、虐待である：第一子,: n番目-の型セレクタこのセレクタを使用するように、結果が悪いスケーラビリティで、長いHTMLが変更ととして、それがスタイルにつながるんではない仕事、またはこれは、他の無関係の要素に影響を与えます。しかし、これはセレクタが長いだけでなく小さな点が、マージン左内の最後のLi liのすべてに作るために、あなたが書くことができ、例えば、非常に便利であるとしてとして、使用することはできないという意味ではありません。
.listing-list li:last-child{
margin-left: 10px;
}これは、直接あなたよりも強いクラスを設定することができます。しかし、どんなに何、あなただけの少ないクラス名を記述するのではなく、それを使用する権利の時間を乱用することはできません。
カバレッジを削減
カバレッジは、一般的な戦略ですが、また、あまりエレガントな方法は、次のコード、20ピクセルピッチの各家の真ん中を可能にするために、しかし、最初の家の間隔を持っていません。
.house{
margin-top: 20px;
}
.house:first-child{
margin-top: 0;
}実際には、これにそれを変更することができます：
.house + .house{
margin-top: 20px;
}私がヒットすることはできませんので、それはより簡潔なコードを探しますので、唯一のフロントでは、ない最初の.house前から、このセレクタをヒットする.house .house。
そここの場合、次のコードに示すように：
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}ないセレクタ：実際には、あなたはを利用することができます。
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}これは、多くのコードでもエレガントで見えます。
カバーは価値がある、と次のようにそれは、小さなスクリーンの大画面カバレッジ内応答スタイルであります。
@media (min-width: 1025px){
.container{
width: 1080px;
margin: 0 auto;
}}私はカバレッジを減らすの原則に従うためには、そうで書き込みを始めたが、後でこれは良い習慣ではないことが判明し、コードが簡単にはっきりブラウザで見ることができる利点をカバーするために書かれた混沌、覆われている小さな画面スタイルにありますスタイル大画面、これは一種どのように、いつ大画面のです。
あまり重要！
特にしかし、重要な以下良く、プロパティの内部をカバーするために使用されるCSSスタイルで、プロパティをカバーすることが重要。1！重要、これが最優先であり、しばしばカマキリは、蝉の茎の記事でオリオール、おそらく前に長いので、高い優先順位の上書きを記述する必要があることを書くことが時々、あなただけの怠惰それは少し恥ずかしいです。私たちは、より少ない以下使用することができます。あなたは上書きするか、セレクタ正しい方法を増やすことで重量を追加したい場合。
組版仕様
かどうかはJS / CSS、インデントは、そのように、スペースを使用して、トップインデントにフックを入れて、タブサイズ4を選択し、あなたは崇高を使用している場合、ソフトウェアの右下隅にあるタブのサイズを持って、4つの空間に転送されますあなたはインデントにタブキーを打つ時は、自動的に4つのスペースに変換されます。あなたがVimを使用している場合は、追加または編集〜/ .vimrcとファイルには、行を追加します。
：設定タブストップ= 4が自動的に4つの空間に引き込まれる、他の編集者は自身が設定方法を見つけます。tは、同じ表示長ではなく、スペースは異なるエディタ内のコンピュータ上の異なる人々で一貫したフォーマットを変更することがありますので。
次のように複数のセレクタは、スタイルセット、自行セレクタのそれぞれを共有します。
.landing-pop,
.samll-pop-outer,
.signup-success{
display: none;
}またスペースで、〜、>、+フロントセレクタのコロンの後にスペースを持つ各属性名：
.listings > li{
float: left;
}背景IMGの適切な使用
画像を表示するには2つの方法がありますが、あなたは何時間も何でCSSの背景画像を設定するか、imgタグを使うことができますか？
ヘッドは、直接である場合は、それ自体がSEOを必要としないことをSEO強化のimg alt属性、および背景画像を使用して書くことができますので、それは、バックグラウンドの使用に背景画像として使用されている場合は、画像を示すか、imgタグするための図。背景のbackground-positionがありますが：センターセンターは非常に良いですが、それでもIMGバーを使用することを最初のマップは、それに自分自身を中心に、またはSEOを行うことはできません。
応答仕様
縮小サイズは他の人が14pxある、少し奇妙に見えますので、外出する規模、そしてあなた：応答の開発は、ハイブリッドレム、テキストサイズを使用するか、使用しないすべてのREMを使用しない、または最悪の場合、変換を使用していませんそれは13.231px、ビット小さくなりました。応答一般的な原理は両側または中間に同じ間隔を維持し、その後、主コンテンツの幅を小さくすることです。
以下インラインブロックレイアウト
一部の人々は、ブロックがラップしますので、特に学校カット図形の初めに、インラインブロックを使用したい、とも折り返されませんインラインブロックは、非常にスムーズにボックスモデル、持つため、インラインブロックを持っており、より複雑なフロートが、また、などの問題をクリアフロートに対処します。以下のレイアウト：
インラインブロックそれぞれの目標を達成することができます：あなたは、Liの表示が許可すれば、その後、李フロートを聞かせて、リチウムを記述する必要があります。ブロックはどちらの最終的にブロックレベル要素でありながら、しかし、いくつかの奇妙な問題かもしれくらいのインラインブロックで、あなたは通常、インラインブロックは、インライン要素であり、インラインブロック要素の集合ブロック要素の内側にしたいです少し異なります。これは浮くはずです/フレックスあなたが楽に浮いている場合、あなたがより良いインラインブロックよりも、多くのプロを見つけるだろう、より自然になります。あなたはどのように使用され、フレックス、あなたはフレックス使用するように変更しようとすることができない場合は、どのようにフロートを使用していない場合、あなたはそれを試すことができます。あなただけの切断計画の多様化は、あなたがカットにマッピングし、より柔軟な調達することができます。
