【回答】リセットCSSについて

問題

ブラウザによって異なるデフォルトのCSS、特にpaddingとmarginを打ち消すためにリセットCSSを導入しました。

すると元々文字の色が赤かったものが黒く変わってしまいました。

原因と対処策について教えて下さい。

前提：Ruby on Railsでhamlを使用

html.haml

%html
    %head
    省略
    %body
        .content
            文字を赤くする

testscss.scss

html {
  color: red;
}
.content {
  padding: 50px;
}

application.scss

@import "testscss";
@import "reset";

表示結果

回答

リセットCSSを読み込んでから、自作のCSSを読み込ませるようにする。

application.scss

@import "reset"; // まずリセットCSSを読み込ませる
@import "testscss";

理由はCSSは後から記述した内容で上書きされるからです。

今回の例で言えば、自作のCSSでは以下のような記述しています。

html {
  color: red;
}

一方リセットCSSでは以下のような記述があります。

html {
  color: black;
  background: white;
}

つまり、自作CSS→リセットCSSの順番でCSSを適用すると「文字の色を赤くする」→「文字の色を黒くする」となってしまうわけです。

リセットCSSの適用する順番には気をつけましょう。

少し補足

今回は自作CSSでpaddingを設定していますが、こちらはリセットCSSで上書きされませんでした。

理由はcontentクラスを指定しているからです。

クラスを指定せずに自作CSSでhtmlにpaddingを設定しているとこちらも上書きされてしまいまう。