CSSってわかりにくいですか？あなたは一人ではありません

私が Web 開発の旅を始めたとき、他の皆さんと同じように、基礎から始めました。HTML、CSS、そして JavaScript を学びました。私はただできるだけ早く何かを構築したかったので、プロジェクトの構築を開始できる程度のことだけを学び、その後は、新しいものを見つけたり、必要性を感じたりしたときに調べるようにしていました。
この方法の利点の 1 つは、小さなプロジェクトを迅速に構築できることですが、この方法には学習に多くのギャップが残るという大きな欠点もあります。

早速ですが、私は ReactJS を学習中で、楽しんでいますが、コンポーネントのスタイル設定となると、CSS があまり明確に感じられなかったため、イライラして直感に反してしまいました。私の頭。望ましい結果を達成するためにプロパティを追加するだけですが、途中のどこかで、一歩間違えば崩壊するのを待っている古代の橋の上を歩いているように感じました。

CSS は私が思っていたほど複雑でも難しくもないことがわかりました。実際のところ、私は CSS の適切なメンタル モデルを持っていませんでした。
一般に、CSS は、目的の外観や配置を実現するためのプロパティ (キーと値のペア) のコレクションであると考えられています。しかし、私にとってこれは今では変わりました。この記事が終わるまでに皆さんも変わってくれることを願っています。

1. CSS をプロパティのコレクションとして考えないでください。むしろ、CSS はレイアウト モードのコレクションであると考えてください

• CSS は、レイアウト モードと呼ばれる、多くの異なる レイアウト アルゴリズムで構成されています。
• 各レイアウト モードは、CSS プロパティの使用方法を再定義および変更できる CSS 内の独自のサブ言語のようなものです。 言い換えれば、CSS プロパティはこれらのアルゴリズムに入力されます。したがって、一連のプロパティを覚えるのではなく、これらのアルゴリズムがこれらのプロパティをどのように使用するかに焦点を当ててください。

2.

各レイアウトは特定の問題を解決するように設計されています

• デフォルトのレイアウト モード: 通常フロー は、デジタル ドキュメントを作成することを目的としています。
これは MS Word のレイアウト アルゴリズムに似ています。つまり。見出しと段落はブロックとして垂直に積み重ねられ、テキスト、リンク、画像などはこれらのブロック内に配置されます。
ノーマル フローとは別に、最も頻繁に使用する他の 2 つのレイアウト モードは、フレックスボックス レイアウトとグリッド レイアウトです。

3.

フレックスボックスおよびグリッド レイアウト モード

繰り返しになりますが、すべてのレイアウト モードは特定の問題を解決するために作成されました。次のように考えてください。
• Flexbox はどのような問題を解決しますか?
• フレックスボックスは、項目のグループを行または列に非常に柔軟に配置し、グループ内で各項目をどのように分散および配置するかを制御することを目的としています。

• グリッドはどのような問題を解決しますか? CSS グリッドを使用すると、2 次元でのアイテムのグループの配置と整列が簡単になります。これにより、個々の項目、または項目の行/列を柔軟に制御して、その配置を操作できるようになります。
  

レイアウト モードのコレクションと、それが CSS プロパティにどのように影響し、変更するかという観点から CSS を考え始めると、CSS が多数の行にまたがる場合でも、物事がどのように起こっているかについてのより明確なメンタル モデルが得られます。

以上がCSSってわかりにくいですか？あなたは一人ではありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。