これは、不要なレンダリングが 1 つ増えたことに相当します。

これは当然のことだと思っていますが、ブラウザはそれほど愚かだと思いますか?

レンダリング前に最終的なスタイルを計算するのではないでしょうか?

ご招待ありがとうございます~~

はは、穴の中で転がって全身泥だらけになりました~~~

CSSを書き始めた当初は、質問者様の再利用性、拡張性、命名規則、ディレクトリ構造の構成などを考慮せずに、何を書けば良いのかというところに直行して、このように書きました。プロジェクトの場合、CSS は単純に巨大です

ゆっくりと、まだ検討する必要がある問題がたくさんあることがわかりました

その後、CSS 命名標準を考慮し、一部の繰り返しスタイルの抽出を考慮し、再利用を考慮して、画像を最適化することについて考え始めました。

その後、less と sass を使用して css を作成し、css モジュールを使用して css を処理し、gulp を圧縮とパッケージ化にも使用しました。

CSS スタイルを徐々に理解し、最適化していると言えます。

穴はまだ大きいので、ゆっくりと埋める必要があります

1. 自分でコンポーネントを作成しないでください。あなたのページが楽しみや初心者向けに書かれている場合を除きます。現在、業界には非常に多くのコンポーネントやフレームワークがあるので、それらを自由に使用してください。
2. その後、スタイルをオーバーライドするだけで済みます。
3. 「もう少しレンダリングする」という複雑な考えは、最初のビルドではなく、再構築中にのみ表示されるべきです。数日間考えて何もせずに書くと、信じられないかもしれませんが、プロジェクトマネージャーがあなたをハッキングして殺します。もちろん、誰も工期を指定しなければ、何をやっても構いません。だから、潔癖症にならないでください。
4. あなたの記事全文を読んだ後、あなたは間違いなく潔癖症だと思います。気軽に書いてください。もちろん、プロジェクトに必要なフォルダー構造やコンポーネントの分割は検討する必要があります。これらは、たとえ改善が必要であっても、次のプロジェクトで変更しないでください。そうしないと、1年でプロジェクトを思いつくことはできません。

誰もがシンプルで直接的な方法を恋しく思っていますが、フロントエンド エンジニアリングの傾向は止まらず、概念はますます増え、コードはますます肥大化し、ディレクトリ構造はますます複雑になっています。 webpackでフロントエンド環境をデプロイするのは面倒ですし、mdでサーバーを立てるだけです。

webpack css モジュール?

密室で作業することはお勧めできません。他の人のコンポーネントがどのように書かれているかを見に行ってください。
初心者には、通常、bootstrap ライブラリをお勧めします。このライブラリの CSS は、どのように構成されているかを詳しく見てみましょう。

大規模なプロジェクトに限って言えば、小規模なプロジェクトにはファイルが多すぎるため、非常に面倒です。

大規模なプロジェクトでは多数のビジネスが存在するため、スタイル ファイルのモジュール化とコンポーネント化は管理の便宜のためでもあります。ファイル名によって、対応する変更箇所を見つけることができます。

各担当者がプロジェクトに対応する 1 つのファイルのみを担当するため、プロジェクト管理が容易になると同時に、共同開発によって引き起こされる衝突も軽減されます。

少なすぎるよりは適度の方が良いです。 CSS が原因でプロジェクトを本当に最適化する必要がある場合は、それを最適化できます。可能な限りレベルを上げてください。自分のレベルで最高の自分を目指しましょう。盲目的に何かを追求しないでください。自分が何を望んでいるのかを知る

プリコンパイルされたツールの使用方法を知っている場合は、weui のソース コードを確認することをお勧めします。

まず、現時点で考えられることを実行し、それからゆっくりと最適化します。