2023.3.1
古いサイトの更新がしんどい・・・。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 すれば楽な場合もあるんじゃないかと思っています。それは今度試してみます。
2023.3.4Sass使わないほうがコーディングのスピードが出る？こんにちは。 最近思いました。 Sassの機能ってそんなに使ってないな、と。 Sassの機能といえば・・・ネストできるところですけど、@mediaと疑似要素以外は特に使ってないです。 .bl_card { &::before { content: 'あ'; } @media (max-width: 500px) { width: 100%; } } CSSだけのほうが速いのかな・・？ 考えるよりとりあえず試す派なので、Sassのコンパイル時間が無い方が調子が出るのかもしれない。
2023.3.1古いサイトの更新がしんどい・・・。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 すれば楽な場合もあるんじゃないかと思っています。それは今度試してみます。