postcss-オートリセットおよびpostcss-初期の目的は何

Question

は何のための目的です：

• PostCSS Autoreset
• PostCSS Initial

ドキュメントは両方で非常に希薄であると本当にありませんなぜそれらを使うべきか、その目的が何であるかを説明してください。

私は自動リセットを試みました。スタイルを設定するすべての要素にall: initialが配置されているようです。これは、出力を見ると非常に無駄に思えます。

それはから任意の異なる方法

：ちょうどそれを行うように思わ自動リセットのためのコードを見てみると

* { 
    all: initial, 
    font-family: "Roboto" 
} 

：https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

これは*

より優れているのは、なぜ私は得ることはありません

Answer 1

プラグインやアドオンのような他の人のアプリケーションやウェブサイトに統合できる分離可能なコンポーネントを作成する場合は、*よりも優れています。

Answer 2

postcss-autoreset CSSの継承されたプロパティから保護します。

コンポーネントを書き、npmに公開したとします。 BEMまたはCSSモジュールを使用しているため、セレクタが分離されています。すべてのサイズが壊れになるため、デフォルト以外のbox-sizingの

* { 
    box-sizing: border-box; 
    line-height: 2 
} 

：しかし、いくつかの開発者がでWebページにあなたのコンポーネントを取りました。 os非標準line-heightテキストが大きくなり、デザインを壊したためです。

これはEmojiMartコンポーネントのこのような問題の実際の例です。

postcss-autoresetは、コンポーネントのCSS内のすべてのセレクタにall: initialを置く：あなたのコンポーネントおよびコンポーネントに、この自動挿入all: initial無効ユーザーbox-sizingとline-height結果

.component { 
    all: initial; /* added by postcss-autoreset, you didn’t write it */ 
    width: 100px; 
    padding: 10px; 
} 
.component_title { 
    all: initial; /* added by postcss-autoreset, you didn’t write it */ 
    height: 20px; 
} 

ユーザーのウェブサイトで同じように見えます。