共同開発をしていたり、決まったフレームワークで開発をしている場合、CSSを上書きが頻発して、実現したい表現ができないことがたまにあります。
そんな時、以下のサンプルのように書くことで、本来で読み込ませたいスタイルの優先度を適宜、指定することでCSSの上書きの繰り返しを軽減したり、!importantの頻発を防止することができます。
本来後から書いたスタイルが上書きされますが、以下の書き方をすると、それを逆転することができるということです。
<style>
@layer layer2, layer1;
@layer layer1 {
.demo_style {
background-color: black;
color:white;
}
}
@layer layer2 {
.demo_style {
background-color: yellow;
color: black;
padding:10px;
text-align:center;
}
}
</style>
<div class="demo_style">layer2→layer1の順でスタイルを実行</div>
実行結果
layer2→layer1の順でスタイルを実行
