戯説フロントエンドのCSSコード仕様
6993 ワード
前言
プロジェクトの起動時にcssが注意すべき問題
ファイル名仕様
ファイル名は小文字で中横線を付けることをお勧めします.どうしてですか.このように可読性が強く、さわやかに見えるので、リンクのようにもこのような方法で、例えば
では、変数名に小文字で線を引く方法はありません.例えば、family_treeではなく、アルパカ式のファミリーツリーがおすすめ?C言語ではこのような方法で変数を命名するのが好きだが、下線が叩くのが難しいため、アルパカ式で変数を命名することが多い.
CSSファイルを導入したlinkは、type=「text/css」を持たずに次のコードを使用できます.
linkで最も重要なのはrelという属性なのでtypeは要らないが、relがないわけにはいかない.
JSも同じ理屈でtypeを使わなくてもいいです.次のコードです.
に はありません.
き
プロパティの き み は、 の きを いてブラウザでは されません.しかし, が していれば,このセレクタがどのようなタイプの が しているかを で ることができるので, に な を に く. される は のとおりです.
あなたは が あまり がないと っているかもしれませんが、そう いたのは、あなたが い を っていることを しています.そして はルールが ぬのではなく、 には で、あなたがtransformで ん に くかもしれないように、left/top/transformを べて くことができると います.これも いないと います.そうすれば、あなたが をしているのか で ることができるからです.
スタイルフィーチャーを して を けない
スタイルの で を けるのが きな もいるかもしれません.たとえば、 のようにします.
それからhtmlの に のp 1/p 2/bold-font/right-wrapなどのクラス が っているのを ることができます.これは ましくありません.red-fontを ったとしたら、 のUIが を えると、あなたが いたこのクラス は に たないか、 の で のレイアウトがスクリーンにあるときに に ってしまうとしたら、rightを ってはいけません.UI を ってみると、UIには18 px/16 px/14 pxが3 ほど われていることがわかり、3つのクラスp 1/p 2/p 3を き、 なる には なるクラスがセットされています.これは 、 するように かれていますが、 のhtmlを ると、 が ってしまいます.これらのp 1/p 2/p 3のクラスには2、30 が かれていて、びっしりと かれています.このように くならタイトルラベルを りて のように いたほうがいいと います.
を きくすると、タイトルになる が いので、なぜタイトルラベルを わないのか、タイトルラベルにデフォルトのスタイルがあるだけでは できません.
クラスのネーミングには、signup-success-toast、request-demo、agent-portrait、company-logoなどの が されます.
もしいくつかのスタイルが に していると ったら、clearfixのようなクラスとして、あるいはいくつかのアニメーション があり、いくつかの で われていると います.このような で するのは でクラスとして できると います.しかし、 の を う がある.
ハックは わない
CSSを くときにhackの を って を く もいます. のようにします.
この の は//あるいは_ のCSS ブラウザは しないで、そこで されて、セミコロンは の で、//からセミコロンの まですべてブラウザに されて、しかしこのような は しないで、あるいは.cssファイルを します.lessかscssファイル、これで しく// が えます.
*の のプロパティがIE 6のhackであるなど、 のブラウザに したhackもあります.どうしてもhackは わないでください.
セレクタのパフォーマンス
セレクタは に3つ かないでください.sassやlessを く もいます. のように くの をカバーするのが きです.
1つの は1つの をカバーして、1つの は1つの をカバーして、 は7、8つの をカバーして、このような いセレクタの は に くて、Chromeの は で のセレクタからずっと1つにマッチングして、セレクタが ければ いほど、マッチングの はもっと くて、そのため は に くて、しかもコードの も に くて、 のpラベルのスタイルがどれなのかを るために、 は も を て、どこのpなのかを なければなりません.コードの には7、8 がインデントされていて れているように えます.
には2、3つの なセレクタを けばいいので、 に かずに、 なターゲット にclassやidをつけることができます.
のセレクタのラベルは ないはずです.もしあなたが いたら.container div{}では、ページ のすべてのdivが に しているのは、 から に しているため、htmlには くのクラスをセットしないメリットがありますが、 が いので、 には わないでください.
セレクタの を ける
のスタイルが の のスタイルに されたり、 のスタイルがうっかり の に を えたりすることがあります.クラスの が の と じである があります.セレクタが いた が すぎる があります. えば、 のページに いた がいます.
その 、 のページの スタイルが けられた. 、*グローバルマッチングセレクタは かないでください.たとえば、3つのサブセレクタがあるセレクタでは、パフォーマンスや の が きすぎます.
3つのコンテナでは、*が され、font-sizeのように される もあります.この3つのコンテナにはfont-sizeがあり、 と きされます.
もう1つはfirst-child、:nth-of-typeというセレクタを した で、このセレクタを すると が く、htmlが されるとスタイルが に たなくなり、 の に を ぼす があります.しかし、このようなセレクタが えないというわけではありません.よく えば です. えば、すべてのliの で のliのmargin-leftを さくすると、このように くことができます.
これはあなたが 1つのクラスをカバーするより いかもしれません.しかしいずれにしても、クラス を なく くためだけではなく、 してはいけない.
オーバーライドを らす
オーバーライドは な であり、 のコードでは、 houseの の20 pxの を しますが、 のhouseには がありません.
はこのように することができます.
だけあります.houseのhouseはこのセレクタに することができます. のためです.houseの にはないので できません.コードが に えます.
また、 のコードに すように、この もあります.
には、notセレクタを します.
これでコードも に えます.
1つのカバーは があります.それは の の さなスクリーンのスタイルが きなスクリーンをカバーすることです. のようにします.
は はこのように いていましたが、カバーを らす に うために、このような がよくなく、コードが れやすいことに づきました.カバーを くメリットは、ブラウザで らかに ることができて、 さなスクリーンのスタイルはどの きなスクリーンをカバーしたスタイルで、これは きなスクリーンの にどうなっていますか.
わないで!important
importantは を きするために され、 にCSSではstyleの を きするために されますが、importantは ないほうがいいです. サボるために いてください.importantは、この が も いと っています.カマキリがセミを まえたり、 が ろにいたりして、 もなくまた の いカバーを く が いので、 し まずいです.だから ないのか ないのか. きする は、セレクタのウェイトを する を に します.
レイアウト
JS/CSSにかかわらず、インデントは4つのスペースに されます.sublimeを すると、ソフトウェアの にTab Sizeがあり、Tab Size 4を し、 のIndent Using Spacesをチェックすると、tabキーをインデントすると に4つのスペースに されます.vimを する は、~/.を または します.vimrcファイルの しい :
:set tabstop=4も にインデントを4つのスペースに し、 のエディタは で を します.tは なるエディタで さが なるため、スペースに すると なる のパソコンでフォーマットが します.
のセレクタは、 のように1つのスタイルセットを します.
アトリビュート のコロンの ろにスペースを け、~、>、+セレクタの にもスペースを けます.
backgroundとimgを しく
1 の を するには2つの があり、CSSのbackground-imageを したり、imgラベルを ったりすることができますが、いったいいつ うのでしょうか.
ヘッダマップなど されるピクチャであればimgラベルで、バックグラウンドマップとしてbackgroundを します.imgを するとalt SEOを くことができますが、バックグラウンドマップ はSEOを としません.backgroundにはbackground-position:center centerが1つずつありますが、 のようなものはimgを いましょう. で ん に きましょう.そうしないとSEOはできません.
レスポンス
はremを しないほうがいいです. はすべてremを うか、 わないか、transform:scaleを って しないでください. された は し に えますが、 の は14 pxで、あなたは13.231 pxになって、 し さくなりました. の は、 に、 または の を に ち、その 、 コンテンツの を することである.
Inline-blockレイアウトを なくする
の はinline-blockが きで、 にカットを い めたばかりの は、blockが するため、inline-blockは しないでボックスモデルを っているので、inline-blockは いやすいが、floatは で、フローティングをクリアするなどの も しなければならない. のレイアウト:
liを くべきで、それからli floatを って、li display:inline-blockにも を させることができます.しかし、inline-blockが く われると な があるかもしれません.あなたは 、inline-blockの の にblockの を れなければなりません.inline-blockは の ですが、blockはブロックレベルの です.この2つは し います.これはfloat/flexを うほうが です.floatを うとinline-blockよりずっとよく、 になります.flexをあまり ったことがない は、flexを ってみてください.floatをあまり ったことがない は、 ってみてください.あなたのカットパターンが してこそ、カットが になります.
プロジェクトの起動時にcssが注意すべき問題
ファイル名仕様
ファイル名は小文字で中横線を付けることをお勧めします.どうしてですか.このように可読性が強く、さわやかに見えるので、リンクのようにもこのような方法で、例えば
// : github
https://github.com/wangjeaf/ckstyle-nodeでは、変数名に小文字で線を引く方法はありません.例えば、family_treeではなく、アルパカ式のファミリーツリーがおすすめ?C言語ではこのような方法で変数を命名するのが好きだが、下線が叩くのが難しいため、アルパカ式で変数を命名することが多い.
CSSファイルを導入したlinkは、type=「text/css」を持たずに次のコードを使用できます.
linkで最も重要なのはrelという属性なのでtypeは要らないが、relがないわけにはいかない.
JSも同じ理屈でtypeを使わなくてもいいです.次のコードです.
に はありません.
き
プロパティの き み は、 の きを いてブラウザでは されません.しかし, が していれば,このセレクタがどのようなタイプの が しているかを で ることができるので, に な を に く. される は のとおりです.
あなたは が あまり がないと っているかもしれませんが、そう いたのは、あなたが い を っていることを しています.そして はルールが ぬのではなく、 には で、あなたがtransformで ん に くかもしれないように、left/top/transformを べて くことができると います.これも いないと います.そうすれば、あなたが をしているのか で ることができるからです.
スタイルフィーチャーを して を けない
スタイルの で を けるのが きな もいるかもしれません.たとえば、 のようにします.
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}それからhtmlの に のp 1/p 2/bold-font/right-wrapなどのクラス が っているのを ることができます.これは ましくありません.red-fontを ったとしたら、 のUIが を えると、あなたが いたこのクラス は に たないか、 の で のレイアウトがスクリーンにあるときに に ってしまうとしたら、rightを ってはいけません.UI を ってみると、UIには18 px/16 px/14 pxが3 ほど われていることがわかり、3つのクラスp 1/p 2/p 3を き、 なる には なるクラスがセットされています.これは 、 するように かれていますが、 のhtmlを ると、 が ってしまいます.これらのp 1/p 2/p 3のクラスには2、30 が かれていて、びっしりと かれています.このように くならタイトルラベルを りて のように いたほうがいいと います.
.house-info h2{
font-size: 18px;
}
.house-info h3{
font-size: 16px;
}を きくすると、タイトルになる が いので、なぜタイトルラベルを わないのか、タイトルラベルにデフォルトのスタイルがあるだけでは できません.
クラスのネーミングには、signup-success-toast、request-demo、agent-portrait、company-logoなどの が されます.
もしいくつかのスタイルが に していると ったら、clearfixのようなクラスとして、あるいはいくつかのアニメーション があり、いくつかの で われていると います.このような で するのは でクラスとして できると います.しかし、 の を う がある.
ハックは わない
CSSを くときにhackの を って を く もいます. のようにします.
.agent-name{
float: left;
_margin: 10px;
//padding: 20px;
}この の は//あるいは_ のCSS ブラウザは しないで、そこで されて、セミコロンは の で、//からセミコロンの まですべてブラウザに されて、しかしこのような は しないで、あるいは.cssファイルを します.lessかscssファイル、これで しく// が えます.
*の のプロパティがIE 6のhackであるなど、 のブラウザに したhackもあります.どうしてもhackは わないでください.
セレクタのパフォーマンス
セレクタは に3つ かないでください.sassやlessを く もいます. のように くの をカバーするのが きです.
.listings-list{
ul{
li{
.bed-bath{
p{
color: #505050;
}
}
}
}}1つの は1つの をカバーして、1つの は1つの をカバーして、 は7、8つの をカバーして、このような いセレクタの は に くて、Chromeの は で のセレクタからずっと1つにマッチングして、セレクタが ければ いほど、マッチングの はもっと くて、そのため は に くて、しかもコードの も に くて、 のpラベルのスタイルがどれなのかを るために、 は も を て、どこのpなのかを なければなりません.コードの には7、8 がインデントされていて れているように えます.
には2、3つの なセレクタを けばいいので、 に かずに、 なターゲット にclassやidをつけることができます.
のセレクタのラベルは ないはずです.もしあなたが いたら.container div{}では、ページ のすべてのdivが に しているのは、 から に しているため、htmlには くのクラスをセットしないメリットがありますが、 が いので、 には わないでください.
セレクタの を ける
のスタイルが の のスタイルに されたり、 のスタイルがうっかり の に を えたりすることがあります.クラスの が の と じである があります.セレクタが いた が すぎる があります. えば、 のページに いた がいます.
* {
box-sizing: border-box;
}その 、 のページの スタイルが けられた. 、*グローバルマッチングセレクタは かないでください.たとえば、3つのサブセレクタがあるセレクタでは、パフォーマンスや の が きすぎます.
.house-info .key-detail .location{}3つのコンテナでは、*が され、font-sizeのように される もあります.この3つのコンテナにはfont-sizeがあり、 と きされます.
もう1つはfirst-child、:nth-of-typeというセレクタを した で、このセレクタを すると が く、htmlが されるとスタイルが に たなくなり、 の に を ぼす があります.しかし、このようなセレクタが えないというわけではありません.よく えば です. えば、すべてのliの で のliのmargin-leftを さくすると、このように くことができます.
.listing-list li:last-child{
margin-left: 10px;
}これはあなたが 1つのクラスをカバーするより いかもしれません.しかしいずれにしても、クラス を なく くためだけではなく、 してはいけない.
オーバーライドを らす
オーバーライドは な であり、 のコードでは、 houseの の20 pxの を しますが、 のhouseには がありません.
.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;
}には、notセレクタを します.
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}これでコードも に えます.
1つのカバーは があります.それは の の さなスクリーンのスタイルが きなスクリーンをカバーすることです. のようにします.
@media (min-width: 1025px){
.container{
width: 1080px;
margin: 0 auto;
}}は はこのように いていましたが、カバーを らす に うために、このような がよくなく、コードが れやすいことに づきました.カバーを くメリットは、ブラウザで らかに ることができて、 さなスクリーンのスタイルはどの きなスクリーンをカバーしたスタイルで、これは きなスクリーンの にどうなっていますか.
わないで!important
importantは を きするために され、 にCSSではstyleの を きするために されますが、importantは ないほうがいいです. サボるために いてください.importantは、この が も いと っています.カマキリがセミを まえたり、 が ろにいたりして、 もなくまた の いカバーを く が いので、 し まずいです.だから ないのか ないのか. きする は、セレクタのウェイトを する を に します.
レイアウト
JS/CSSにかかわらず、インデントは4つのスペースに されます.sublimeを すると、ソフトウェアの にTab Sizeがあり、Tab Size 4を し、 のIndent Using Spacesをチェックすると、tabキーをインデントすると に4つのスペースに されます.vimを する は、~/.を または します.vimrcファイルの しい :
:set tabstop=4も にインデントを4つのスペースに し、 のエディタは で を します.tは なるエディタで さが なるため、スペースに すると なる のパソコンでフォーマットが します.
のセレクタは、 のように1つのスタイルセットを します.
.landing-pop,
.samll-pop-outer,
.signup-success{
display: none;
}アトリビュート のコロンの ろにスペースを け、~、>、+セレクタの にもスペースを けます.
.listings > li{
float: left;
}backgroundとimgを しく
1 の を するには2つの があり、CSSのbackground-imageを したり、imgラベルを ったりすることができますが、いったいいつ うのでしょうか.
ヘッダマップなど されるピクチャであればimgラベルで、バックグラウンドマップとしてbackgroundを します.imgを するとalt SEOを くことができますが、バックグラウンドマップ はSEOを としません.backgroundにはbackground-position:center centerが1つずつありますが、 のようなものはimgを いましょう. で ん に きましょう.そうしないとSEOはできません.
レスポンス
はremを しないほうがいいです. はすべてremを うか、 わないか、transform:scaleを って しないでください. された は し に えますが、 の は14 pxで、あなたは13.231 pxになって、 し さくなりました. の は、 に、 または の を に ち、その 、 コンテンツの を することである.
Inline-blockレイアウトを なくする
の はinline-blockが きで、 にカットを い めたばかりの は、blockが するため、inline-blockは しないでボックスモデルを っているので、inline-blockは いやすいが、floatは で、フローティングをクリアするなどの も しなければならない. のレイアウト:
liを くべきで、それからli floatを って、li display:inline-blockにも を させることができます.しかし、inline-blockが く われると な があるかもしれません.あなたは 、inline-blockの の にblockの を れなければなりません.inline-blockは の ですが、blockはブロックレベルの です.この2つは し います.これはfloat/flexを うほうが です.floatを うとinline-blockよりずっとよく、 になります.flexをあまり ったことがない は、flexを ってみてください.floatをあまり ったことがない は、 ってみてください.あなたのカットパターンが してこそ、カットが になります.