css - CSSをリファクタリングするにはどうすればよいですか？

Question

重複の可能性：
CSSの爆発を管理する方法

私は一貫したスタイルと一貫したCSSスキームで自分のWebサイトを構築するつもりでした。しかし、個々のページ（特にメインの検索フォーム）を微調整すると、スタイルが制御できなくなりました。

私はすでにスタイルを分解し、ほぼゼロから再構築するプロセスを一度経験しましたが、今はそれをもう一度行う時のようです。どうすればこれを効率的に行うことができますか？私はソフトウェアユーティリティではなく、方法論を探しています（ただし、費用がかからない限り、そこで提案を受け入れることができます...）。

注を追加： 私はCSSフレームワークを使用しており、維持paddingおよびmargin調整するのが困難です。

注2を追加： この投稿への最初の回答は、CSSのベストプラクティスに関するものです。私がすでにベストプラクティスに従おうとしたと仮定しましょう（実際、私はそうしました）。これが私が探しているクリーンアップ手順です。

注3を追加： 6月14日の時点で、この回答（私が見つけたばかり）を以下の私の投稿と組み合わせると、おそらく包括的な回答になります。

クロージャーノート：

私の質問は一般的すぎることを知りました。そのため、投稿していなかったらよかったのにと思います。（多分それが反対票を獲得した理由です...理由を説明するコメントなしでは決してわかりません。）一方、私は必要なものだけを手に入れたので、それを投稿できてうれしいです。

私は自分の答えに賛成票を投じなかったことに驚いています。他の人からの貴重な意見があっても、それはかなりうまく機能していると思います。

私の受け入れは、私の観点から、答えの使いやすさに主に基づいています-悲しいことに、よりエキサイティングで包括的な応答のいくつかを消化することができない観点です。

完全な複製としてクローズ

SOが「CSS爆発を管理する方法」の投稿を提案するかどうかを確認するために、これをもう一度投稿してみました（件名、本文、タグ）。興味深いことに、そうではありませんでした。refactoringその投稿にタグを追加しました。

score 16 · Accepted Answer

cssを別々のファイルに分割します。

CSSリセットを1つのファイルに入れます（使用する場合）
次に、すべてのページに適用されるグローバルスタイルを配置するglobal.cssファイルを作成します
次に、個々のページの個々のファイルを作成します

次に、ページのスタイル設定を開始します。多くのページで再利用可能なスタイルルールを見つけるたびに、それをCSSクラスにして、global.cssファイルに配置します。cssIDの使用は避けてください。あなたはより頻繁に物事を再利用するか、将来再利用することに気付くでしょう。この場合、もちろんCSSクラスを使用します。

最終的に、global.cssには、主にCSSクラスのルールとhtmlタグのルールが含まれていることがわかります。

個々のページのCSSファイルには、各ページの特定のスタイルがあります。

これにより、CSSの最初のレベルの組織が適切になります。開発プロセス全体を通してこの分離を維持することを試みることができ、リリースの場合、CSSファイルを1つにマージし、それを縮小します。

score 9 · Accepted Answer

以前の同様の質問からのcssクリーンアップについての私の2pの価値：大きなcssファイルをクリーニングして維持するためのヒント

これが他の人の答えと一緒にあなたを助けるかもしれないことを願っています！

プロジェクトの分岐を開始します（ここでは、バージョン管理ツールを使用していると思います）。これにより、コードを個別に操作して、到達するマイルストーンにタグを付けることができます。
CSSをビューティファイアでフォーマットします。読みやすさが向上し、インスタンスを見逃すことなく特定の宣言を検索するのに役立ちます。
未使用/冗長なcssを特定し、それを取り除くようにしてください。
セレクターを短くすることもできます（たとえば、.main .foo .barは.barとして問題ない場合があります）。これにより、読みやすさが向上し、パフォーマンスが向上しますが、少し塩を入れて、問題が発生した場合に戻る準備をしてください。あなたが取るすべてのステップで壊すために。
可能であれば、！importantを削除してください。必要に応じて、セレクターをより具体的にしてください。cssリセットは、ブラウザ固有の問題を修正するために！importantステートメントのほとんどが行われた場合に役立ちます。そうでない場合、cssリセットを導入すると、問題を解決するよりも多くの問題が追加される可能性があります。これは、アプリにcssリセットがない場合です。すべて。
cssを分割して別のモジュール（およびそれが役立つ場合はファイル）に再グループ化します-オブジェクト指向CSSは、物事をより保守しやすくするための可能な手法です。最初から始めると最も効果的ですが、リファクタリングにも役立つ場合があります。https://github.com/stubbornella/oocss/wikiは有効なものですが、SMACSSのように検討できる代替手段があります。
その後、LessやSassなどのcssプリプロセッサの使用を検討し、変数とミックスイン（関数と同様）、モジュール性などを定義できるようにします。ただし、これは非常にコストのかかる作業になる可能性があるため、これを慎重に評価してください。痛みよりも多くの利益をもたらします。
できるだけ頻繁にテストし、単体テストを検討して、行った変更が他の場所で何かを壊さないことを確認します。
すべてを書き直すと、リファクタリングよりも時間がかからない場合があります。そのため、リファクタリングでは十分なメリットが得られないことが評価で示された場合は、そのままにしておくことを恐れないでください。

編集

物事は変化し、永遠に進化します。OOCSS / SMACSSアプローチに関しては、私はしばらくの間、YandexのCSS用のBEM方法論を喜んでフォローしてきましたが、上記に追加の推奨事項として追加したいと思います。

score 3 · Accepted Answer

最初に行うことは、目的に基づいてCSSを分離することです。たぶん、最初に一般的なページレイアウト（DIV、ボックス、...）、次にスタイリング（フォント、H1 / H2 / ... / Hnタイトル）、次にいくつかのより特殊なCSS（テーブル、フォーム、特定のコンポーネントのCSS）サイトの）。

このような分離は、変更を整理するのに役立ちます。フォントを変更または追加する必要がある場合は、スタイリングセクションにあります。ページレイアウトを変更する必要がある場合は、同じようになります。

「個別のページ」があると、物事が乱雑になる傾向があります。それらのレイアウトはとても異なっていますか？可能な限り、ページの一般的な機能（たとえば、メインコンテンツコンテナボックス）を抽象化する必要があります。次に、レイアウト（1列、2列）などをさらに専門化することを検討します。プログラマーのバックグラウンドがある場合は、クラスと継承について考えてみてください。概念は、まったく異なるドメインであることはわかっていますが、cssの設計に役立つ場合があります。

score 2 · Accepted Answer

この現在の作業に基づいて、これまでに得たものは次のとおりです。

計画

HTMLとCSSでTo-Do表記を処理するためのシステムを用意します。多くのIDEはこれを直接サポートします。そうでない場合は、グローバル検索機能で問題なく動作します。タグ付けの問題に加えて、優先順位とおそらく機能領域にさえ注意する必要があります（ただし、負担ではなく、単純にしてください）。
コードの改訂を開始しないでください。To-Doシステムを使用して最初に計画します。
全体的な目標の簡潔なリストを作成します。
- 色やフォントスキームなど、全体的なスタイルの変更を検討してください。
- CSSのベストプラクティスを確認します。アプローチが効果的でない領域、または優れたアプローチをより一貫して適用できる領域を特定します。例：
  - クラスを統合する
  - インラインスタイルの無計画な使用を排除します
  - 未使用または冗長または競合するスタイルを削除します
  - 一般的な一貫性を向上させます。一連の規則を適用する
  - 測定単位を改善する
  - フォーマットではなくコンテンツを反映するクラス名とID名を使用する
- サポートするブラウザ市場の量と、最新の標準を採用または依存する量を決定します。
- 採用したい新しいアプローチがあるかどうかを判断します。例：
  - ブラウザの表示を標準化するためのリセットスタイルシートの使用
  - CSSフレームワークの使用
  - たとえば、フォームを支援するための専用ライブラリの使用
  - 動的CSS （最近、PHPを使用してCSSを処理するというアドバイスに従い、配色を動的に制御できました。しかし、IDEでのCSSコードの表示が好きで、ハイブリッドメソッドがそれを台無しにしたため、ストレートCSSに戻りました。）。
目標のリストを確認し、今すぐ追求すべき目標を決定します。大規模な変更は、可能であれば個別に扱う必要があります。列のレイアウトが混乱している場合は、CSSがJavaScriptをエレガントに置き換える方法を学ぶときではありません。ベストプラクティス、スタイルの変更などについても同じことが言えます。
CSSファイルの速度を設定している場合（たとえば、フットプリントを圧縮したり、すべてのCSSを1つのファイルにまとめたりする場合）、それを変更します。コードを人間が管理できる形式に分割します。後で終了したら、ベンチマークを試して、より読みやすいバージョンも本番環境で使用するのに十分効率的かどうかを確認してください。
CSSをバリデーターに送信します。修正したい違反に注意してください。
HTMLでインラインスタイルのインスタンスを検索します（style属性を検索します）。スタイルシートに移動する必要があることに注意してください。

作品
ToDoマネージャーをフォローしてください。常識的なバックアップを作成します。作業を進めながら、いくつかのブラウザで作業をテストします。
正規表現に興味がある場合は、注意が必要です。正規表現は、CSSを書き換えるのに効果的または安全ではないことがよくあります。（HTMLほど危険ではありませんが、それでも）。正規表現はCSSの変更をHTMLに送信するのに役立つ場合がありますが、ここでも注意が必要です。
余白とパディングに多くの調整がある場合は、それらすべてをグローバルにリセットしてみてください0px（わかりました、ここで正規表現を使用してください）。次に、それらを体系的にバックアップします。この方法で多くの混乱を解決できます。もちろん、このプロセスにはライブラリやフレームワークのスタイルシートを含めないでください。
繰り返しますが、CSSをバリデーターに送信します。

score 2 · Accepted Answer

OOCSSなどのアプローチを使用することを人々がすでに提案しているのを見るので、私は別の/追加の考え方を提供するつもりです。問題はCSSやその書き方よりも深いところにあると思います。私はあなたのCSSが手に負えなくなる理由はあなたの質問からのこの引用であると信じています：

...個々のページを微調整するとき..。

そのため、問題はCSSではなく、デザインにあると思います。そのため、少し詳しく説明します。私の意見では、優れたデザインとは、個々のページごとにカスタマイズする必要のないデザインです。それにはいくつかの理由があります。主な理由は、あなたがあなた自身に言ったように、あなたのCSSが制御不能になることです。個々の要素の小さな調整と修正は、それらが配置されている場所に応じて、しばしば混乱につながりますこれは、維持して作業するのが面倒です。ここには使いやすさの理由もあります。ユーザーがUIに精通していて、ページごとに自分自身を認識していれば、UIはあまり変化することなく、使いやすくなると思います。もちろん、各ページに存在しない要素や、ページ間で多少異なる要素を含めることもできますが、私は常にそれらを最小限に抑えるように努めています。

とにかく時間と手間がかかるCSSを書き直すつもりなら、同時にデザインを見直して再評価してみませんか。同じように見えるように変更できる要素があることに気付くでしょう。デザインを損なうことなく、できるだけ多くのUI要素を取り除くことを目標にします。デザインを可能な限り統一したら、CSS、さらにはマークアップをリファクタリングするときが来ましたか？

この時点で、すべてのCSSを削除して、最初からやり直す方がよい場合があります。古いコードを続行すると、怠惰になり、効率の悪い古いコードの一部に行き詰まりやすくなります。

コーディングに関しては、他の回答には多くの優れた推奨事項とベストプラクティスが含まれていると思います。私自身も新しい発見であるOOCSSに個人的に投票しますが、CSSの構造が大幅に改善されました。だからそれを見てください！これは、要素とそのCSSを再利用するという観点からも考えるのに役立ちます。これは、CSSを単純化するのに大いに役立ちます。

score 1 · Accepted Answer

この答えはメモに関するものです。「私はCSSフレームワークを使用していますが、パディングとマージンの調整を維持するのは困難です。」それだけ。

cssプリプロセッサを使用すると、この問題が解決します。cssには継承を割り当てる方法がないため、「margin：10px」を何度も繰り返す必要があります。

プリプロセッサを使用すると、

@margin {10px}
@padding {10px}

それから

.mySelector{
    margin: @margin;
    padding: @padding;
}

より広い質問については、cssは設計の複雑さに正比例し、それについてできることはあまりないため、設計を再考/単純化してください。

http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/も参照してください。

score 0 · Accepted Answer

これは、プロセスを管理する方法のQよりも、CSSを保守可能にするためのアドバイスです。

それぞれが特定の属性（色、フォント、余白、角）または機能（ナビゲーション、フォーム）に合わせて細かく調整された個別のcssファイルの束を作成します。次に、コンパイルフェーズを使用して、これらのファイルを1つ以上のファイルに結合および縮小して、クライアントに送信します。これはビルド/テストプロセス中に行いますが、CGIスクリプトによって動的に行うことができます。

プリコンパイラーを採用する前に、見過ごされがちなマルチセレクター構文を検討してください。

element,
otherlement
{
  margin:10px;
}

この例では、要素に10pxのマージンを持たせたい場合はいつでも、それをリストに追加します。私はこの方法で異なる属性のセットを分離します-同じ要素をcssに5回リストすることができます-それを5つの異なる属性のセットに関連付けます。

また、さまざまなクラスをbodyタグに追加して、OOのような継承を作成することも忘れないでください。たとえば、サイトに3つの主要なセクションがある場合は、それらのセクションに基づいてbodyタグにクラスを割り当てます。同様に、商品ページが1000ある場合は、bodyタグに「product485」のようなクラスを指定して、そのページにのみ適用されるスタイルを作成できます。例えば：

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}

これはすべて、マージンのみを指定する「margins.css」というファイルに含まれている可能性があります。

css - CSSをリファクタリングするにはどうすればよいですか？

7 に答える 7

計画

作品

Related

Reference