[フロントエンド辞書]幸せを向上させるための9つのCSSのヒント

序文

この記事では、CSSをより簡潔でエレガントにするための9つのヒントを紹介します。これらのスキルは若い学生によってよく使用され、彼らはそれが非常に効率的で実用的であると感じているので、私はこの記事を持っています。

9つのCSSのヒント

ここで言及されているCSSには、CSSだけでなく、CSSプリプロセッサ（Less Sassなど）も含まれていることをここに宣言します。これに巻き込まれないことを願っています。

テキストは今始まります。

1.マージンの代わりにパディングを使用してみてください

デザインドラフトを復元する場合、パディングとマージンは2つの一般的に使用される属性ですが、同じBFCに属する2つの隣接するボックスのマージンが重なることがわかっているため、マージンを頻繁に使用すると、ボックスの垂直方向が距離が重なる場合があります。

もう1つの問題は、最初の子要素のmargin-top値が親要素に追加されるというバグです（最後の子要素のmargin-bottomにも同様の問題があります）。ここで誰かが理由を尋ねていますか？

その理由は：

マージンを折りたたむという表現は、2つ以上のボックス（互いに隣接しているかネストされている場合があります）の隣接するマージン（空でないコンテンツ、パディングまたは境界領域、またはクリアランスがそれらを分離していない）が結合して単一のマージンを形成することを意味します。

翻訳は次のとおりです。

隣接する2つ以上のボックス要素すべてのマージンは、共有マージンにマージされます。隣接は、同じレベルまたはネストされたボックス要素として定義され、空でないコンテンツ、パディング、または境界線の分離はありません。

合併の理由は、個人的には、キューイング撤退の安全距離に似ていると思います。人と人との安全距離は1mですが、安全距離を統合しないと、人と人との距離は2mになるのでしょうか？アップ。もちろん、これはおそらく理由ではありません。

したがって、マージンの代わりに最初の要素でパディングを使用できます。もちろん、パディングを使用してもニーズを満たせない場合もあります。その場合は、「空でないコンテンツ」の状態について大騒ぎすることもできます。つまり、親要素に疑似要素を追加します。

したがって、マージンを使用するときは、マージンの折りたたみに注意する必要があります。

2.位置：ダウングレードの問題を修正

天井効果に遭遇したことがあるのか​​、position：fixed属性を使用したことがあるのか​​わかりません。実際、変換がその親要素で使用されている場合、fixedの効果は絶対にダウングレードされます。

解決：

絶対的な効果にダウングレードされるので、どうすればこの問題を解決できますか？どのような状況で固定および絶対的なパフォーマンスへの影響が同じになるかを検討します。

つまり、fixedを使用した直接の親要素の高さが画面の高さと同じである場合、fixedとabsoluteのパフォーマンスへの影響は同じになります。

直接の親の要素がスクロールしている場合は、overflow-y：autoを追加します。

3. px | em | rem |％およびその他の単位を合理的に使用します

CSSには、px | em | rem |％などの多くの距離単位と、CSS3のvh | vwなどの単位があります。

では、プロジェクトでどのように使用する必要がありますか？PC側ではこの複雑さを考慮する必要がないため、ここでは主にモバイル側でのこれらのユニットの使用について説明します。

基本単位px

pxは私たちが最初に接触したユニットですが、モバイルエンドの適応の要件の下では、使用頻度はそれほど高くありません。次の使用例を要約しました。

比較的小さいパターン

たとえば、rが5pxの円を描く必要があります。remを単位として使用すると、一部のモデルのパターンが丸くなく、楕円形に見えることがすぐにわかります。これは、remをpxに変換するときに精度が低下するためです。

したがって、現時点では、pxとdprを使用して次のことを実現する必要があります。

// less 

/*@size 建议取双数*/

.circle(@size, @backgroundColor) {  

    width: @size;

    height: @size;

    background-color: @backgroundColor;

    [data-dpr="1"] & {

        width: @size * 0.5;

        height: @size * 0.5;

    }

    [data-dpr="3"] & {

        width: @size * 1.5;

        height: @size * 1.5;

    }

}

1pxの細い線の問題

この問題については、以下の別のセクションで説明するため、ここでは説明しません。

フォントサイズ（基本的にはremが単位として使用されます）

一般的に、フォントサイズの単位としてremも使用しますが、精度が低下するため、許容範囲内だと思います。

相対単位レム

Remは、CSS3によって追加された新しい相対単位（root em）であり、HTMLルート要素に相対的なフォントサイズの値です。

レムは、アダプティブに最も広く使用されているユニットである必要があります。

相対単位em

emも相対単位ですが、現在の要素のフォントサイズを基準にしています。

行の高さ

通常、emを行の高さで使用することをお勧めします。フォントサイズを調整する必要がある場合は、font-sizeの値を変更するだけでよく、行の高さは相対的な行の高さに設定されているためです。

最初の行を2文字インデントします

最初の行のインデントが必要な場合にも、このユニットを使用します。

text-indent: 2em

ビューポートユニットvw | vh

vw: 1vw = 视口宽度的 1%
vh: 1vh = 视口高度的 1%

レムユニットで設計された柔軟なレイアウトでは、解像度の変化を監視してルート要素のフォントサイズを動的に変更するスクリプトをヘッドにロードして、CSSとJSを結合する必要があることがわかっています。

では、この結合の問題に対する解決策はありますか？

答案就是视口单位 vw | vh。

以下は、前任者によって与えられた使用計画です。

$vm_fontsize: 75;

@function rem($px) {

     @return ($px / $vm_fontsize ) * 1rem;

}

$vm_design: 750;

html {

    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; 

    @media screen and (max-width: 320px) {

        font-size: 64px;

    }

    @media screen and (min-width: 540px) {

        font-size: 108px;

    }

}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小

body {

    max-width: 540px;

    min-width: 320px;

}

4.変数の合理的な使用

通常、デザインドラフトの特定の種類のテキスト（要素）は同じフォントサイズ、色、行の高さ、その他のスタイル属性を使用するため、UIがデザインを更新するときに変更する必要があるため、これらの値を毎回書き込む必要はありません。多くの場所があります。これらの再利用された値を変数に保存できます。

SassとLessは少し異なります：

// sass

$direction: left;

// less

@direction: left;

もちろん、CSSにはネイティブに変数があり、使用規則は次のとおりです。

变量定义的语法是： --； // *为变量名称。
变量使用的语法是：var()；

1. 変数の定義と使用の両方は、宣言ブロック{}にのみ含めることができます。

2. CSSの可変文字数の制限は、[0-9]、[a-zA-Z]、_、-、中国語、韓国語などです。

    :root {

        --blue_color: #3388ff;

        --main_bgcolor: #fafafa;

        --font_size_12: 12px;

        --font_size_14: 14px;

        --color: 20px;

    }

    .div1{

        background-color: var(--main_bgcolor);

        font-size: var(--font_size_12);

    }

5. Mixinを使用して、繰り返しパターンを分類します

繰り返される変数と同様に、繰り返されるパターンも分類できます。優れたコードの1つは、コードの再利用性に違いないと思います。

以前にCSSを作成したときは、クラスに再利用可能なコードを配置しました。これにより、特定の再利用性が実現しましたが、次の図に示すように、最終的な効果として、要素に多数のクラスを配置することができます。

このように、次に引き継ぐ人は必然的に少し混乱し、スタイルの変更がますます難しくなります。

現時点では、mixin（クラス内のクラスとして理解できます）がその役割を果たすことができます。

これは説明テキストのスタイルです。

.font-description {

    .font-des-style(24px,#fff,1.5em);

    .line-camp(2);

}

// less

/* 多行显示 */

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    -webkit-box-orient: vertical; 

}

.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {

    font-size: @fontSize;

    color: @color;

    line-height: @lineHeight;

    text-align: @textAlign;

}

これは単純な例です。再利用可能なスタイルをミックスインに含めることができるため、プロジェクトを引き継ぐ人は、要件の反復を開始するために作成したミックスインに精通している必要があります。

6.1pxスキーム

モバイル端末を実行したフロントエンドは、1pxの細い線の問題への対処を絶対に避けてはなりません。この問題の理由は、UIがますます多くのページの美学を必要とするためです（これが網膜画面の問題であるとは言わないでください）。

Xiaoshengが知る限り、特に優れた互換性を備えたソリューションはないようです。ここでは、2つの比較的優れたソリューションを提供します。

疑似クラス+変換を使用する

.border_bottom { 

    overflow: hidden; 

    position: relative; 

    border: none!important; 

}

.border_bottom:after { 

    content: ".";

    position: absolute; 

    left: 0; 

    bottom: 0; 

    width: 100%; 

    height: 1px; 

    background-color: #d4d6d7; 

    -webkit-transform-origin: 0 0;  

    transform-origin: 0 0; 

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

}

もちろん、バージョンが低い一部のモデルでは、このソリューションには、不均一な太さや細い線の消失や破損などの互換性の問題もあります。しかし、今は2019年であり、より低いバージョンのモデルはほとんど排除されています。

ボックスシャドウシミュレーションを使用する

.border_bottom {

  box-shadow: inset 0px -1px 1px -1px #d4d6d7;

}

このスキームは基本的にすべてのシナリオに対応できますが、色が薄くなるという欠点があります。

7.html要素からボックスサイズを継承します

ほとんどの場合、要素の境界線とパディングを設定しており、要素の幅と高さを変更したくありません。この時点で、要素にbox-sizing：border-box;を設定できます。

毎回書き直したくはありませんが、継承されることを願って、次のコードを使用できます。

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

これの利点は、他のコンポーネントのbox-sizing値を上書きせず、要素ごとにbox-sizing：border-box;を繰り返し設定する必要がないことです。

8.最初の画面のインラインキーCSS

パフォーマンスの最適化には重要な指標があります。FirstEffectiveDraw（FMP）は、ページの主要なコンテンツが画面に表示される時間を指します。このインジケーターは、ユーザーがページを表示するまで待機する必要がある時間に影響し、インラインのクリティカルCSS（またはクリティカルCSS）は、ユーザーにより良い心理的期待を与えることができます。

示されているように：

インラインCSSを使用すると、ブラウザの開始ページのレンダリング時間を短縮できます。つまり、HTMLのダウンロードが完了した後にレンダリングできます。

これはインラインキーCSSであるため、CSSコードのごく一部のみを直接HTMLに書き込むことを意味します。インライン化するCSSについては、Criticalを使用できます。

9.テキストが省略を超えており、テキストが両端に配置されている

私たちはしばしばそのようなニーズに直面し、ここで直接ソリューションを提供します。
省略を超えて

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    -webkit-box-orient: vertical; 

}

発生した問題：

-webkit-box-orient：verticalこのコードは、webpackを使用してパッケージ化すると削除されます。理由は、optimize-css-assets-webpack-pluginの問題です。

解決：

次の表現を使用できます。

.line-camp( @clamp:2 ) {

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: @clamp;

    /*! autoprefixer: off */

    -webkit-box-orient: vertical;

    /* autoprefixer: on */

}

正当化

// html

<div>姓名</div>

<div>手机号码</div>

<div>账号</div>

<div>密码</div>

// css

div {

    margin: 10px 0; 

    width: 100px;

    border: 1px solid red;

    text-align-last: justify;

}

効果は次のとおりです。

フロントエンド辞書シリーズ

「フロントエンド辞書」シリーズは今後も更新されていきますので、毎号、頻繁に出てくる知識のポイントについてお話します。読んでいるうちに、文章のどこに厳密さや誤りがないのかを見つけていただければ幸いです。このシリーズから何かを手に入れていただければ幸いです。

私の記事がうまく書かれていると思うなら、あなたは私のWeChatパブリックアカウントに従うことができます、それは前もってあなたを台無しにするでしょう。

また、私のWeChatwqhhsdを追加することもできます。

次のプレビュー

次のいくつかの記事では、Vue関連を紹介します