css - 厳しい締め切り後の CSS の特異性とスタイルシートの正規化

Question

ページ上に多くの要素とさまざまなスタイルを含む、重量のある長い販売ページの構築を終えたところです。CSS は最終的に、そのセレクターで具体的になりすぎており、丸みを帯びたボックス、背景画像などが数多くあります。要するに、 CSSは少し混乱しています。（責めるのは自分だけ！）

重複したプロパティなどを組み合わせるために、このスタイルシートを体系的に調べる方法を誰かが提案できますか? これを行うためのツールがあるとは思えませんが、他の人はこの状況にどのように対処しているのでしょうか?

ありがとう。

score 1 · Accepted Answer

可能であれば、CSS を簡略化されたプロパティに結合します。
一意の DOM ID を利用して、その要素の子にスタイルを適用します。
class="somestyle some-other-style" のように、同じ要素で複数の CSS クラスを使用できます。これを使用すると、複製された CSS スタイルを取得して、それらを 1 つに定義できます。
* セレクターを使用して、スタイルをすべての子に適用します。
すべてが 1 つの大きな CSS ファイルに含まれている場合は、コードをセクションに分割して、スタイルがサイト全体のページに関連するようにします (例: /* MEMBERS PAGE */)。
スタイルをオンラインコンプレッサーで実行して、コードサイズを縮小します。要素を自動的に組み合わせて、さらに複雑さを軽減するものもあります。

これで始められるはずです。これ以上追加するのは難しいです。実際には、html コードと構造がどのように設定されているかによって異なります。アイデアを提供していただければ、さらに支援することができます。

score 1 · Accepted Answer

実際、いくつかのCSS Refactoring toolsがあり、SO でよく取り上げられています。

ただし、私は常に手作業でリファクタリングを行っているため、それらを保証することはできません。私のテクニックは、既存のスタイルを次のように分割することです。

これは通常、簡単なコピー & ペーストジョブです。そこから、類似点と冗長性がより明確になるため、組み合わせと単純化がはるかに簡単になります。

これが完了したら、TOC をページの上部に配置すると、セクションを見つけやすくなり、一般的に検索しやすくなります。

2 に答える 2