postcss-autoresetは、ブラウザのデフォルトでfont-familyをオーバーライドしています

Question

私はpostcss-autoresetを使用しています。これはall: initial;を私のCSSファイルのIスタイルに適用しています。

しかし、body要素のフォントを設定しようとすると、CSSでスタイルを設定していない要素だけがフォントを取得します。私がスタイリングした要素は、ブラウザのデフォルトに戻ります。それは非常に奇妙です。

all: initial;は、font-faceを上書きしているようです。Chromeのインスペクタで表示すると、オーバーライドされて表示されるためです。

以下の例では、ブラウザのデフォルトを使用しているヘッダー内のテキストを除いて、ページ上のすべての要素がRobotoフォントで表示されています。

app.css

@import "variables.css"; 
@import "header.css"; 
@import "footer.css"; 

body { 
    font-family: 'Roboto'; 
    margin: 0 auto; 
    display: block; 
} 

header.css

header { 
    padding: 10px 0; 
} 

config.jsの（PostCSS CLIは、config.jsのファイル）

{ 
    "use": [ 
     "postcss-import", 
     "postcss-cssnext", 
     "lost", 
     "rucksack-css", 
     "postcss-autoreset", 
     "postcss-font-magician" 
    ], 
    "input": "src/app.css", 
    "output": "css/main.css", 
    "local-plugins": true, 
    "autoprefixer": { 
     "browsers": "last 2 versions" 
    } 
} 

なぜこれが起こっている

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 100; 
    src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 300; 
    src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 400; 
    src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 500; 
    src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 700; 
    src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: italic; 
    font-weight: 900; 
    src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 100; 
    src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 300; 
    src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 400; 
    src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 500; 
    src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 700; 
    src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff") 
} 

@font-face { 
    font-family: Roboto; 
    font-style: normal; 
    font-weight: 900; 
    src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff") 
} 

header, 
header .brand, 
header nav, 
header nav li, 
header nav a, 
header nav, 
header nav ul, 
header nav li, 
body, 
body { 
    all: initial 
} 

header { 
    background: #00AFEC; 
    display: block 
} 

header .brand { 
    width: 100% 
} 

header nav li { 
    display: block; 
    text-align: center 
} 

header nav a { 
    color: #FFF; 
    text-decoration: none; 
    font-size: 18px 
} 

@media (min-width: 361px) { 
    header nav { 
    width: 100% 
    } 
    header nav ul { 
    float: right 
    } 
    header nav li { 
    padding: 0 30px 
    } 
} 

body { 
    font-family: 'Roboto'; 
    margin: 0 auto; 
    display: block; 
} 

任意のアイデア：ここでは出力がpostcssによって生成されていますか？

Answer 1

postcss-autoresetresetオプションを受け入れます。デフォルトではall: initialで、フォントがリセットされます。しかしresetをall: initial; font-family: inherit; font-size: inheritに設定することをお勧めします。

postcss-autoresetでは、実際に継承するプロパティを明示する必要があります。resetオプションでは、デフォルトでいくつかの継承プロパティを設定できます。

Answer 2

通常、font-familyは親要素によって継承されます。だから、あなたはページ全体が明示的にあなたの要素に定義されたフォントファミリがなくても、Robotoフォントを使用するために、単純な

html { 
font-family: Roboto; 
} 

を使用することができます - 彼らは単にhtmlある親から値を継承します（またはあなたの例ではbody）。

postcss-autoresetを使用している場合は、すべての要素のスタイルがall: initial;になり、font-familyがリセットされます。したがって、これらの要素にはRobot font-familyはありません。

Btw、postcss-autoresetの使用をお勧めしません。私はそれを使用する際のポイントが表示されません。多くのことをしない（1つのprop/valueを追加するだけです）と、ちょっとしたことでCSSの継承コンセプトが破られてしまいます。私の意見では、人々は主にブラウザの不一致のバランスをとるためにpostcssを使うべきです。 autoprefixerとpostcss-fixesのようなプラグイン（ここではいくつか自己宣伝しています）は素晴らしい仕事です。プリプロセッサのsass/less/stylusを置き換えたいのであれば、precssのような他のプラグインも意味をなさないかもしれませんが、予期せぬ動作や出力につながる多くのマイクロプラグインを追加するというこのコンセプトは、IMHOがあまりにも不安定で、解決する。