Clever Geek Handbook

開発者を減らすためのいくつかのヒント

多くの場合、コンパイルされたcss-codeを忘れることが多いので、less-filesを作成します（付随的に他のcssプリプロセッサに関係します）。less-codeの美しさと優雅さを追求します。 これにより、最終的なcssのボリュームが一定時間増加し、コードが完全に読み取れなくなると、重大な結果が生じることがあります。



免責事項

1）この記事は、SASS / SCSS開発者とCSSライターの両方に適しています。

2）上記のコード例は同一ではありませんが、ほとんどの場合、互換性があり、ヒントを示すために書かれています。



1）長すぎる投資をしないでください



通常のcssコードを書くとき、これは通常起こりません。 cssプロパティの前に10個の要素のチェーンを記述することはほとんどありません。 しかし、より少ないコードのツリー構造では、これは可能性が高いです。 コードラダーを簡素化します。 個々のブロックを選択して取り出します。 これは、特にジェネリッククラスとIDに当てはまります。 セレクターのチェーンが長いとスタイルシートが重くなり、読みにくくなります。場合によっては、CSSファイルのサイズが過剰なネストのために2倍になることがあります。

悪い よし 
#root { max-width: 1200px; margin: 0 auto; .wrapper { padding: 1rem; .cart { background: #eee; h1 { font-size: 2rem; margin: 1rem 0 2rem; &#green-header { color: green; } } .good { border: 0.1rem solid #ccc; } input { border: 1px solid #ccc; &.error { background: #99ffff; } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 #root { max-width: 1200px; margin: 0 auto; .wrapper { padding: 1rem; } } #green-header { color: green; } input.error { background: #99ffff; } .cart { background: #eee; h1 { font-size: 2rem; margin: 1rem 0 2rem; } .good { border: 0.1rem solid #ccc; } }




コンパイルされたcssコードを表示
悪い よし 
  #root { max-width: 1200px; margin: 0 auto; } #root .wrapper { padding: 1rem; } #root .wrapper .cart { background: #eee; } #root .wrapper .cart h1 { font-size: 2rem; margin: 1rem 0 2rem; } #root .wrapper .cart h1#green-header { color: green; } #root .wrapper .cart .good { border: 0.1rem solid #ccc; } #root .wrapper .cart input { border: 1px solid #ccc; } #root .wrapper .cart input.error { background: #99ffff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


  #root { max-width: 1200px; margin: 0 auto; } #root .wrapper { padding: 1rem; } #green-header { color: green; } input.error { background: #99ffff; } .cart { background: #eee; } .cart h1 { font-size: 2rem; margin: 1rem 0 2rem; } .cart .good { border: 0.1rem solid #ccc; }








2）コンマで区切られたセレクターに注意してください



セレクターのアタッチメントの先頭にコンマで区切られた2つ以上のセレクターを配置する場合（上記の例から）、すべてのルールは、セレクターを先頭に配置する回数だけ複製されます。 結果のcssファイルの重みを最適化することについて言えば、約数十キロバイトを判断できます。 コンマで区切られたセレクターを既に使用している場合、コンマで区切られたセレクターを使用することは特に危険です。 1つの重大なケースを以下に示します。

悪い よし 
 form.type { &#typeAddress, &form#typeReview { textarea { background: #eee; } table { td { &.value { padding: 1rem; } &.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } &.value, &.title { background: #eee; color: #444; a { text-decoration: none; padding: 0 0.4rem; } b { color: #ccc; } p { border-left: 0.25rem solid #ece; } } &.result { padding: 1rem 0; background: green; } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 form.type { textarea { background: #eee; } table { td { background: #eee; color: #444; padding: 1rem; a { text-decoration: none; padding: 0 0.4rem; } b { color: #ccc; } p { border-left: 0.25rem solid #ece; } &.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } &.result { padding: 1rem 0; background: green; } } } }




コンパイルされたcssコードを表示
悪い よし 
 form.type#typeAddress textarea, form.typeform#typeReview textarea { background: #eee; } form.type#typeAddress table td.value, form.typeform#typeReview table td.value { padding: 1rem; } form.type#typeAddress table td.title, form.typeform#typeReview table td.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } form.type#typeAddress table td.value, form.typeform#typeReview table td.value, form.type#typeAddress table td.title, form.typeform#typeReview table td.title { background: #eee; color: #444; } form.type#typeAddress table td.value a, form.typeform#typeReview table td.value a, form.type#typeAddress table td.title a, form.typeform#typeReview table td.title a { text-decoration: none; padding: 0 0.4rem; } form.type#typeAddress table td.value b, form.typeform#typeReview table td.value b, form.type#typeAddress table td.title b, form.typeform#typeReview table td.title b { color: #ccc; } form.type#typeAddress table td.value p, form.typeform#typeReview table td.value p, form.type#typeAddress table td.title p, form.typeform#typeReview table td.title p { border-left: 0.25rem solid #ece; } form.type#typeAddress table td.result, form.typeform#typeReview table td.result { padding: 1rem 0; background: green; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 form.type textarea { background: #eee; } form.type table td { background: #eee; color: #444; padding: 1rem; } form.type table td a { text-decoration: none; padding: 0 0.4rem; } form.type table td b { color: #ccc; } form.type table td p { border-left: 0.25rem solid #ece; } form.type table td.title { padding: 0.5rem 1rem; margin: 0.5rem 0; } form.type table td.result { padding: 1rem 0; background: green; }








3）ミックスイン



ミックスインをより頻繁に作成する


コードを書いているときにdeja vuのように感じたら、お気軽にmixinを追加してください。 これにより、後続のプロジェクトの時間を大幅に節約できます。 多くのオプションを使用して、ミックスインをすぐに完璧にしようとしないでください。 シンプルでわかりやすいものでなければなりません。 その後、それを拡張し、より普遍的にします。



ミックスインのパラメーター化を使用する


使用するミックスインはパラメーター化できます。 まず、便利です。 次に、結果をcssに保存します。

ミックスインを追加するとき、それをボタンのデザインとし、単純なcssプロパティを使用してサイズまたは色を変更します。次に、セレクターのコンパイル済みcssに、最初にミックスインで説明されたルールがあり、次に説明したルールがあります。 cssプロパティの不必要な複製が判明しました。 これは、パラメーター値をミックスインに挿入することで回避できます。このように、ミックスインは必要なパラメーターですぐにコンパイルされます。 また、パラメータのデフォルト値を設定することを忘れないでください。

悪い よし 
 @color-btn: #ea186e; @color-txt: #000; .btn-flat() { display: inline-block; text-align: center; text-decoration: none; margin: 1rem 0; padding: 0.5rem 1rem; background: @color-btn; color: @color-txt; border: 0.1rem solid darken(@color-btn,15%); } #root { a.btn { .btn-flat; } button { .btn-flat; background: #ccc; color: #303; padding: 0.75rem 1.5rem; margin: 1.5rem 0; border: 0.2rem solid darken(#ccc,15%); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 @color-btn: #ea186e; @color-txt: #000; .btn-flat(@bgcolor: @color-btn, @color: @color-txt, @pad: 1rem) { display: inline-block; text-align: center; text-decoration: none; margin: @pad 0; padding: @pad/2 @pad; background: @bgcolor; color: @color; border: @pad/10 solid darken(@bgcolor,15%); } #root { a.btn { .btn-flat; } button { .btn-flat(#ccc, #303, 1.5rem); } }




コンパイルされたcssコードを表示
悪い よし 
 #root a.btn { display: inline-block; text-align: center; text-decoration: none; margin: 1rem 0; padding: 0.5rem 1rem; background: #ea186e; color: #000000; border: 0.1rem solid #a60f4d; } #root button { display: inline-block; text-align: center; text-decoration: none; margin: 1rem 0; /*   ""  */ padding: 0.5rem 1rem; /*   ""  */ background: #ea186e; /*   ""  */ color: #000000; /*   ""  */ border: 0.1rem solid #a60f4d; /*   ""  */ background: #ccc; color: #303; padding: 0.75rem 1.5rem; margin: 1.5rem 0; border: 0.2rem solid #a6a6a6; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 #root a.btn { display: inline-block; text-align: center; text-decoration: none; margin: 1rem 0; padding: 0.5rem 1rem; background: #ea186e; color: #000000; border: 0.1rem solid #a60f4d; } #root button { display: inline-block; text-align: center; text-decoration: none; margin: 1.5rem 0; padding: 0.75rem 1.5rem; background: #cccccc; color: #330033; border: 0.15rem solid #a6a6a6; }








良いミックスインは小さなミックスインです


キューブのようなミックスインを収集します。 コードの繰り返し部分を参照して、ミックスインを使用してください。 多くのcssプロパティにはベンダープレフィックスが付いているため、同様のプロパティごとに@argumentsパラメーターを使用してmixinを追加します。 そして、それらを既に他のミックスインに入れます。

ベンダープレフィックスを持つプロパティにはミックスインを使用します-時間を節約します。 

 @pad: 0.5rem; @bpad: @pad/5; @color-back: #fff; @color-btn: maroon; .border(@color: #ccc) { border: @bpad solid @color; } .gradient(@c1,@c2){ background: @c1; background: -moz-linear-gradient(top, @c1 0%, @c2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@c1), color-stop(100%,@c2)); background: -webkit-linear-gradient(top, @c1 0%,@c2 100%); background: -o-linear-gradient(top, @c1 0%,@c2 100%); background: -ms-linear-gradient(top, @c1 0%,@c2 100%); background: linear-gradient(to bottom, @c1 0%,@c2 100%); } .btn(@padding: @pad) { padding: @padding/2 @padding; display: inline-block; text-align: center; text-decoration: none; } .btn-simple(@color: @color-btn) { .btn; .border(darken(@color,7%)); .gradient(lighten(@color,3%), darken(@color,3%)); color: @color-back; color: lighten(@color,40%); &:hover { .gradient(darken(@color,3%), darken(@color,8%)); color: lighten(@color,50%); } &:active { .gradient(darken(@color,15%), darken(@color,15%)); color: lighten(@color,10%); .border(darken(@color,25%)); } }




4）テンプレートを使用する



いずれの場合でも、特にcss / lessフレームワークを使用しない場合、独自のテンプレートを作成し、より少ないファイルを含めます。各ファイルには独自のルールセットがあります。 そのうちの1つはベンダープレフィックスの小さなミックスインを担当し、もう1つはセレクタのプロパティをCSSでリセットし、3つ目はWebフォントとアイコンを接続します。



5）変数を使用する



色のサイズの変数。 これは、グリッドに固執し、要素を揃えるのに役立ちます。

rem単位を使用してブロックサイズとパディングを設定します。親フォントのサイズに依存しないため、これらは優れています。 したがって、フォントサイズを変更しても、水平インデントは同じになります。 また、htmlタグの画面解像度からフォントサイズの変更を設定すると、すべてのサイズが比例して増加します。 これはタブレットに適用されます。テキストとインデントは、「電話」スケールに比べてわずかに大きくする必要があります。 （最新のブラウザ、つまり9 +で動作します）





まとめると







もちろん、多くのことは特別なcss短縮と最小化によって最適化できますが、高品質のコードを書く必要があります！


More articles:


All Articles