8

この新しい仕事を始めたばかりで、デザイナーとして Web アプリの CSS ファイルを維持する必要があります。現在、約 7000 行にまたがり、重量は 160kb を超え、何百もの重要なルールがあります。

ファイルを再編成し、サブセクションに分割し、クリーンアップして、構文を均質化したいと考えています。

しかし、それは巨大な仕事のように思えます。ファイルとアプリは非常に大きくて複雑なので、何かを壊すことなく (そしてそれを見ずに) 実行できるのだろうかと思います。

私はオンライン ツールを使用してファイルを監査しましたが、あまりリスクを冒すことなく、ある種の自動リファクタリングを使用できるようです。また、セレクターが実際に使用されているかどうかを確認するためにいくつかのツールを試してみました。問題は、この Web アプリが完全に JavaScript で記述されているため、全体が動的であり、通常のツールは実際には使用できないことです (適切なリンクがなく、サイト マップもありません)。等。)

どのように進めるべきか、どこから始めればよいか、またそれが私の時間の価値があるかどうかについて、何か推奨事項はありますか?

4

5 に答える 5

3

このような巨大なコードのリファクタリングは、非常に時間がかかり、困難です。私の経験から、2p の価値があります。

  1. プロジェクトの分岐を開始します (ここでは、バージョン管理ツールを使用していると仮定します)。これにより、コードを個別に操作して、到達するマイルストーンにタグを付けることができます。

  2. ビューティファイアを使用して CSS をフォーマットします。読みやすくなり、インスタンスを見逃さずに特定の宣言を検索するのに役立ちます。

  3. 未使用/冗長な css を特定し、それを取り除くようにしてください。

  4. セレクターを短くすることを試みることができます (たとえば、 の.main .foo .barようにうまくいくかもしれません.bar) - 可読性が向上し、パフォーマンスが向上しますが、これには少し塩を加えて、すべてのステップで問題が発生し始めた場合に戻る準備をしてください。

  5. 必要!importantに応じて、セレクターをより具体的にします。ほとんどの!importantステートメントがブラウザー固有の問題を修正するために作成された場合、css リセットはそれを助けることができます。そうでない場合、css リセットを導入すると、問題を解決するよりも多くの問題が追加される可能性があります。これは、アプリに css リセットがまったくない場合です。

  6. css を分割して別のモジュール (およびそれが役立つ場合はファイル) に再グループ化する - オブジェクト指向 CSS は、物事をより保守しやすくするための可能な手法です。それから始めると最も効果的ですが、リファクタリングにも役立つ場合があります。https://github.com/stubbornella/oocss/wikiは有効なものですが、 SMACSSなど、検討できる代替手段があります。

  7. その後、Lessや Sass などの css プリプロセッサの使用を検討してください。これにより、変数と mixin (関数と同様)、モジュール性などを定義できます。ただし、これは非常にコストのかかる作業になる可能性があるため、慎重に評価してください痛みよりも多くの利益をもたらします。

  8. できる限り頻繁にテストを行い、単体テストを検討して、加えた変更が他の場所で何かを壊さないことを確認してください。

  9. 場合によっては、すべてを書き直す方がリファクタリングよりも時間がかからないことがあります。そのため、リファクタリングが十分な利点をもたらさないことが評価で示されている場合は、そのままにしておくことを恐れないでください。

あなたが直面していることは、最も困難な課題の 1 つです。頑張ってください。

于 2012-05-28T15:00:49.350 に答える
2

すべてのコードを調べて理解する必要があります。いくつかの自動化されたユーティリティを介して実行しようとすることはできません。コンパクトな CSS を書くのは芸術であり、ショートカットを使用することはできません。そうしないと、ファイルが 160kb を超えてしまいます。

一方、ゼロから始めて、オリジナルに基づいて大まかにスタイルを作成することもできます。

ただし、Firefox の Firebug などの「Inspect Element」ユーティリティを使用して、冗長なスタイルがあるかどうかを確認することをお勧めします。

また、複数のページに表示されるスタイルを一般的な CSS ファイルに分割し、その他のスタイルを特定のファイルに分割してみてください。

于 2012-05-28T14:48:41.383 に答える
1

まず、CSS プリプロセッサを使用することをお勧めします。たとえば、LESS を使用できます。最初にhttp://www.procssor.comとカスタム オプションを使用して CSS をよりきれいにし、それをhttp://css2less.cc/に貼り付けます。コードを「モジュール化」するには、おそらくいくつかの変更が必要になる場合があります。

次に、すべてのページには表示されないコード スニペットを取り出して、必要な場所に手動で読み込むことができます。

LESS から CSS をコンパイルして使用を開始します。

編集:

したがって、CSS は次のようになります。

#wrapper #nav { some-rules }
#wrapper #content { some-rules }
#wrapper #footer { some-rules }

#wrapper #content form#register-form { some-rules }

css2less を適用します。

#wrapper {
    #content {
        some-rules;
        form#register-form {
            some-rules;
        } 
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

そしてそれをモジュール化します:

メインレス

#wrapper {
    #content {
        some-rules;
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

レジレス

#wrapper {
    #content {
        form#register-form {
            some-rules;
        } 
    }
}
于 2012-05-28T14:39:18.663 に答える
0

ものは壊れますが、それは大丈夫です、あなたはそれを乗り越えます。書き直しているので、Saas以下のような動的なCSS言語を調べるとよいでしょう。

于 2012-05-28T14:36:56.447 に答える
0

私は最初からやり直します

まず、ボイラー プレートhttp://html5boilerplate.com/ css clearer を使用してスタイルをクリアします。これにより、すべての !important ルールが不要になります。ボイラープレートは、ブラウザー間のスタイルの違いを取り除くことを目的としています。

次に、このhttp://lesscss.org/のようなものを潜在的に使用して、動的に管理可能なスタイル シートを作成します。

共通の要素を探し、これらに共有クラスを使用します。

最も複雑なアプリケーションであっても、7000 行のスタイル シートは必要ありません。

于 2012-05-28T14:42:59.597 に答える