サシャ・グレイフ 公然と疑問に思った CSS が大きくなりすぎたかどうか。 過去数年間にブラウザに搭載されたすべての機能を使用して — コンテナクエリ! 相対色の構文! カスケード層! 論理プロパティ! メディアクエリの範囲! 個々の変換! :has() セレクタ! —そして、可能性のある地平線上にあるすべてのもの— CSS トグル! ネスティング! 色混合! スクロール連動アニメーション! 範囲指定されたスタイル! — 最近の CSS の学習曲線は、新しいフロント エンダーとベテランのフロント エンダーの両方にとって明らかに異なります。
ほとんどの CSS プロパティとそれらがどのように機能するかを知ることができた時代があったかもしれません。 少なくとも私のような古い手にとっては、それらの日は過ぎ去りました. しかし、その種の疑問が生じます： 絶対に知っておく必要がある CSS は何ですか?
最近のビンカス・ストーニーズ リストを突き刺した. クリス 一つにまとめる CSS3 以降にリリースされた機能に基づいています。 おそらく、リストに何を含めるかについてのアイデアがあるでしょう。 トップ 5 をまとめて、プロパティとセレクターのみに制限する必要があるとしたら、次のようになります…
writing-mode
私は十分に言うことができません writing-mode 財産。 特に学習の観点から重要なのは、ユーザーの言語に関係なく、レイアウトの作成を説明する包括的な原則を設定することです。 の十分な理解 writing-mode の理解につながります。 論理プロパティと値、そしてそれらは、文書の流れを理解し、 block, inline, start, end 物理的な方向ではなく。
display
CSS をしっかりと理解していなければ、誰もが優れた CSS を書けるとは思えません。 display 財産。 これは、レイアウトを作成するためのプロパティであり、フレームワークでもあります。 それなしでは Flexbox や CSS Grid はありません。これらの重要な機能を理解するためのゲートキーパーのようなものです。
さらに、 display プロパティは完全に補完します writing-mode. それはまさにあなたが一度必要とするものです writing-mode 文書の流れと論理的な方向性を明らかにしました。 要素の通常のフローを変更する (ブロック要素をインライン要素に変更するなど) か、レイアウトを開始する (柔軟なレイアウト コンテキストを作成するなど) プロパティが必要になります。 display 戦場に出ます。
margin / padding / border
うーん、私はここで完全に不正行為をしていますが、学ぶことを考えてください margin, padding, border 一緒にいるのは一種の避けられないことです。 それらはすべての一部です ボックスモデル、すべてスペーシングとスタイリングに役立ち、すべてに精通する必要があります CSSの長さの単位. これらのプロパティが何をするように設計されているか、およびそれらが要素の計算されたサイズにどのように寄与するかを知ることで、より多くのスタイル制御が可能になり、要素がそのサイズである理由についての混乱 (一般的な CSS の頭痛の種) を払拭できます!
::before および ::after
私が少しごまかしている別のもの。 はい、 ::before および ::after は XNUMX つの個別の疑似要素ですが、繰り返しになりますが、一方を他方なしで学習することは想像できません。 ツーフェです！
これらが存在し、それを使用してあらゆるものを作成できることを知ったとき、私はどれほど衝撃的だったかを覚えています。 クールなUI効果 完成させる 単一分割のイラスト. 新しい可能性を切り開き、CSS が実際にどれほど強力であるかを初めて垣間見ることができます。
@media
おっと、私はすでにリストの XNUMX 番目で最後の項目に到達しましたが、ここに属する CSS の優れた点がまだたくさんあるように感じます。 でも、最後にひとつだけ選ぶとしたら、 メディアクエリ. なんで？ 流動的で柔軟なレイアウトとさまざまな表示コンテキストを作成するための主要な要素だからです。 コンテナクエリ 成熟するにつれて、これを私のリストから外してしまうかもしれませんが、今のところ、 @media レスポンシブ デザインの優れた入門書です。
それ以上、 @media は、CSS の条件付き品質への優れた第一歩です。 使用されているデバイスのタイプに基づいてクエリを作成しているかどうか (例: screen or print) またはブラウザのビューポートが特定の基準 (例: width >= 768px） @media 構文は、さまざまな条件に合わせて最適化されたレイアウトを作成するのに非常に役立ちます。
ああ、私たちはその方法についても触れていません @media その能力のおかげで、アクセシビリティに関連しています ユーザーの好みに基づいてスタイルを適用する （例えば、 prefers-reduced-motion）。 したがって、条件付きレイアウトを作成することに加えて、メディア クエリはインクルーシブ デザインを理解するための優れた次のステップです。
名誉ある言及
CSS を抽出して、知っておくべき XNUMX つのプロパティとセレクターのリストにするのは難しい作業です。特に、今日の CSS は XNUMX 年前よりも強力になっています。 私が本当に含めたかった他の多くの項目があります (順不同):
calc()has()colorfontoverflowposition（特にこれ）z-index
しかし、私は自分の選択を支持します。 CSS を学ぶことは、プロパティのリストを覚えることよりも重要です。 これは旅であり、私が選んだ XNUMX つは、優れたスタイル ルールを記述し、CSS をさらに深く掘り下げるための次のステップを設定するための、小さな学習パスを切り開くものだと思います。
わかりました、あなたのことを教えてください！
私のリストに同意しませんか?あなたがすべき！きっと賢い意見をお持ちだと思いますが、あなたならトップ 5 のリストをどのように仕上げるのか知りたいです。
