クリスのコーナー：いくつかのアドバイス – Codepen

それを得る？！ 「アドバイス」のように、しかしCSSの場合。

いつCSSをネストする必要がありますか？

スコット・ヴァンデヘイは言う：

簡単な答えと少し複雑な答えがあります。簡単な答えは「ネスティングを避ける」ことです。より実用的ですが、より複雑な答えは、「ネストなしでは、ネストなしの修飾子、メディアクエリ、およびネストなしでは機能しないセレクター」です。

背後にある大きなアイデア 回避 ネスト（これは、今ではネイティブCSS機能である場合、聞いていない場合）は、必要ではない特異性の増加につながる可能性があるということです。のように：

.card {
  .content {
    .byline {

    }
  }
}

それ .byline セレクタ おそらく そのようにネストされても何も得られません。そこからそれを分割すると、必要に応じてより多くの再利用可能でオーバーライドしやすくなります。

しかし、これ：

.card {
  @container (width > 60ch) {

  }
}

おそらく良いです！それはあなたを書き直さなければならないことからあなたを救います .card 再びセレクター。スコットは、より多くの例を備えていますが、私は大いに同意します。

既存の色の明るい色をどのように調整しますか？

私はです biiiiig のファン 相対色の構文、これはこの仕事で優れていますが、それについて接している前に、それはまだ十分にサポートされていないので、そうではありません。しかし、それはInterop 2024リストに載っています！

より良いサポートはです color-mix()、そしてコリー・ラビスカ この仕事に使用するという話があります：

使用 color-mix()、背景色に基づいて色合い/シェードを調整できます。つまり、これらの状態で明るい色/暗い色を手動で選択する必要はありません。そして、私たちがoklchを使用しているため、バリエーションは知覚的に均一になります。 HSLとは異なり。

白と黒を色に混ぜ、オクルチの色の空間でそれを行うことで、本質的に色を色付けして覆い、私たちが持っているどんな色でも均等にしていることを知ることができます。これは、私たちの多くが使用しようとした時代とは対照的です darken() SASSでは、色で非常に異なる結果を見つけるだけです。

カスタムプロパティの最終値はどのように計算されますか？

ステファニー・エックルズ：

カスタムプロパティ（別名「CSS変数」）は、かなり簡単に思えます。ただし、ブラウザが最終値をどのように計算するかについて注意すべき動作がいくつかあります。このプロセスの誤解は、予期せぬ価値または欠損値と問題のトラブルシューティングと解決につながる可能性があります。

カスタムプロパティはカスケードをたどり、実行時に計算されます。 できません 事前に前処理されます。しかし、それよりも複雑です。値がカスタムプロパティに対して有効である場合（ほとんどのものは何でも）、しかし ない あなたがそれを使用しようとしている方法に有効ですか？

これは本物のヘッドスクラッチです：

html { color: red; }

p { color: blue; }

.card { --color: #notacolor; }

.card p { color: var(--color); }

結局のところ .card p 実際にはなります red （私は青を推測したでしょう）が、ステファニーは説明します：

.card p になります 継承 color の値 red によって提供される body。のカスケード値を使用できません blue ブラウザは、構文のみを評価している場合、「解析時間」で可能な値候補としてそれを破棄するためです。

透明なインターフェイスに苦労している人々にどのように対応しますか？

アダム・アーガイルは、このようになる可能性があると説明しています、このメディアクエリを使用して、聞いたことがあるかもしれません。

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

アダムは投稿にたくさんの実用的な例があり、その言葉を考慮しています 減少、そしてそれが意味しない方法 絶対に誰もいません。

間隔のプロパティにどのユニットを使用する必要がありますか？

私、私はただ使っています rem 通常、それは私が他のほぼすべてに使用するものです。しかし、Ashlee M Boyerは、テキストのようなものは相対ユニットを使用するのは理にかなっているが、間隔は同じ速度で拡大する必要はないと主張します。

ユーザーが視聴エクスペリエンスをカスタマイズしているとき、彼らにとって最も重要なものであり、手元のタスクは コンテンツ。ユーザーがタスクを実行するためには間隔が不可欠ではないことが多いため、コンテンツ自体と同じ速度で成長またはスケーリングする必要はありません。

コンテンツ間の間隔が大きくなると、不可欠な不動産を食べて管理が難しくなります。

アシュリーはそれを証明します 前のビデオ そして アフタービデオ、間隔のために相対ユニットを絶対ユニットに移動した後。

すべてのSASSファイルに共通のインポートを自動的に含めるにはどうすればよいですか？

これは、簡単にコードベースを持っている人として、私のために家にぶつかります 数百 すべてのようなものから始まるSASSファイルの @import "@codepen/variables"; SASSがいればクールではないでしょうか 仮定する 私たちはそれをしたかったのです 毎 ファイル？

オースティン・ギルは、しばらくして、Viteでそれを行うことでこれをカバーしました。 Vite Configを定義すると、次のようになります。

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/_shared.scss";`
      }
    }
  }

なるほど Webpackもそれを行うことができます、しかし、SASSだけがそれを行うように構成できるかどうかはわかりませんが、できることを望みます。