古いサイトの更新がしんどい・・・。CSSの新機能、カスケードレイヤー（@layer）を使ってみる。

古いサイトの更新依頼がきた。

#home-menu div {
  font-size: 12px;
}
#home-menu p {
  background-color: #ccc;
  float: left;
}
#home-menu span:nth-child(1)::before {
  position: absolute;
  left: 30px;
  background-image: url('../icon/icon1.gif');
}

こんな感じで、ブロックのルートにIDが振ってあって、あとは要素名でスタイルがあたっている。

横並びはfloatかinline-blockかabsoluteで指定してある。

そして、無駄にブレイクポイントがたくさん刻んである。

pもdivもspanも余計なスタイルが効いてくるからしんどい。いちいち余計なスタイルを探して既存部分が壊れないように調整するのもしんどい。かといって、全部!importantするもしんどい。

？？？「これを流用してサクッと新規ページを作ってよ！ベースがあるんだからすぐできるよね？」

邪魔なスタイルに打ち勝つ。

カスケードレイヤー（@layer）を使いました。

@layler oldStyle {
  #home-menu div {
    font-size: 12px;
  }
  #home-menu p {
    background-color: #ccc;
    float: left;
  }
  #home-menu span:nth-child(1)::before {
    position: absolute;
    left: 30px;
    background-image: url('../icon/icon1.gif');
  }
}

/* !important しなくても、自分が追加したCSSが勝つ！ */
@layer newStyle {
  .homemenu_sub {
    display: flex;
    left: 0;
  }
}

多少は（？）気分が落ち着きました。

all: revert; で、初期化して、必要なプロパティ（フォント指定とか）だけ inherit すれば楽な場合もあるんじゃないかと思っています。それは今度試してみます。