CSSコードベースのクリーンアップ

既存のプロジェクトに搭載されて、出発する開発者を置き換えました。あるいは、数年前からあなたの古いプロジェクトを開いたばかりかもしれません。コードを見ると、恐怖と恐怖に直面しています。あなたは1つのことしかできません：この混乱をきれいにしてください！それはあなたに馴染みのあるように聞こえますか？もちろん、私たちは皆、ある時点でこれに遭遇します。

CSSコードベースのクリーンアップは、途方もない作業になることを知っています。やるべきことはたくさんありますが、時間はほとんどありません。特に、クライアント/ボス/同僚が古き良き「壊れていないものを修正しないでください」を擁護している場合。どこから始めればいいのか本当にわかりません！

CSSのクリーンアップのシェアをやったので、あなたは幸運です。それはすべて、垂れ下がった果物をつかむことです。

キーテイクアウト

CSSコードベースのリントは、潜在的なエラーと悪い慣行を特定するため、それをクリーンアップするための最初のステップです。 SCSS-LINTなどのツールを使用して、SASSフォルダーのエラーを確認できます。
• 糸くずエラーの修正は、ファイルを1つずつ進めて間違っていると思われるものを更新するか、検索と交換関数を使用して一般的な問題を修正することで実行できます。 コードベースの構造を改訂することが重要です。どの方法論が選択されているかは関係ありません。これには、選択した方法論に準拠するための再構築コード、またはインターフェイスの再利用可能なチャンクを識別し、それらのスタイルを独自の部分に抽出することが含まれます。
過剰なコードを削除することは、良好なCSSの鍵です。未使用の宣言は技術的な負債を積むことができるため、各CSS宣言が影響を与え、そうでない場合はそれらを削除するかどうかを定期的に確認することが重要です。
• 定期的に仕事をコミットし、少人数のコミットで論理的にバンドルすることにより、何かがうまくいけば歴史に戻りやすくなります。これは、CSSコードベースをリファクタリングするときに特に重要です。途中でいくつかのことが壊れる可能性が高いためです。
• それから地獄を染めます
このセクションでは、コードベースがSASSを使用していると仮定します。最近の合理的な仮定であるだけでなく、SASSの使用が不十分な使用が乱雑なコードベースに部分的に責任を負うことに気づいたからです。それでも、この記事はあなたがプリプロセッサを使用していなくてもあなたに関連するかもしれないので、私と一緒に我慢してください。
コードベースを引き継ぐ必要があるときに最初にやりたいことは、それをまとめることです。糸くずは、潜在的なエラーと悪いプラクティスを探すプログラムを実行するプロセスです。コードをきれいにすることが、コードを良好にするための最初のステップだと思います。これは、「Lint」という言葉の語源に関する洞察に富んだスタックオーバーフロースレッドです。

SASSには、SCSS-LINTと呼ばれるルビーベースのリナーがあります。自分で構成するか、SASSガイドラインから推奨される構成ファイルをつかんですぐに開始できます。 SASS-LINTと呼ばれるnode.jsバージョンもありますが、100％操作可能ではないため、走行距離は異なる場合があります。

SASSフォルダーでSCSS-LINTを実行して、エラーを確認してみてください。エラーの壁に圧倒される可能性が高くなります。これは通常、あなたがあきらめたいと思う時間です。でも私と一緒に！この時点で、あなたが本当に気にしないルール（カラー形式など）に関して、糸くずファイルを少し厳格にしようとするか、それから地獄を覆うことができます！
標識エラーの修正
修正する必要があるものを修正する時が来ました。これを行うには2つの方法があります。 1つ目は、ファイルを1つずつ進めて、悪い名前の命名規則、過度に深くネストされたセレクター、フォーマットされていないコードなど、間違っているように見えるものや奇妙なことを更新することです。少し検索して交換してください。私はあなたのことは知りませんが、私は定期的な表現が大好きなので、これをしなければならないときはいつもとても楽しいです。 たとえば、

すべての浮動小数点数（つまり、0〜1の間の数値）の前に欠落しているゼロを追加したいとします。 s。（d）（d）（スペースとドットに続くすべての数値）を検索し、0ドル（スペース、ゼロ、ドット、および発見された数）に置き換えることができます。または、scss-lintのborderzeroルールを尊重したい場合は、境界を置き換えることができます。パイのようにシンプル！

私は最近、GitHubでSCSS-Lint-Regexリポジトリを開始し、これらの正規表現を1か所で収集しました。あなたが大規模なプロジェクトを癒すのに苦労しているなら、必ず見てください。また、予期しない副作用があることがあるため、検索や交換に注意してください。交換するたびに、Git Diffを実行して更新されたものを確認してください。そうすれば、バグが導入されていないことを確認できます。

横方向の編集が完了したら、クリーニングする必要があるすべてのもの（不十分なインデント、欠落または空のライン、欠落スペースなど）を掃除するために、手動ファイルをクロールすることはできません。時間がかかりますが、次のステップに役立つので、それから始めることが重要です。

構造を修正

既存のプロジェクトに搭載されたときに邪魔になることがよくあるのは、適切なプロジェクトアーキテクチャがないことです。おそらく最初は1つありましたが、通常は手に負えなくなり、この方法論の簡単なアイデアはどこかで行われました。それでも、これは非常に重要です。

それに慣れていて、それに固執する限り、どの方法論を選択するかは実際には問題ではありません。それはsmacssかもしれません、それは7-1である可能性があり、それはitcss - あなたの選択をすることができます！次に、選択した方法論にコードに準拠するように物事を再構築してみてください。私は主にSASSガイドラインで導入された7-1パターンを使用しているので、このように行くことにした場合、物事を改善するためのヒントをいくつか紹介します。

ベンダーフォルダーから始めます。質問はしないものです。パッケージ化されていないサードパーティライブラリをそこに移動します（つまり、NPMまたはバンドラーを介して定期的な依存関係として扱われないライブラリ）。 次に、

abstracts

フォルダーに移動します。プロジェクトのすべての変数、ミキシン、関数、およびプレースホルダーがそこに定義されていることを確認してください。コードベースのすべてのファイルに変数とミキシンが含まれていない限り、ここで希望する方法で自由に整理してください。また、当時、不必要な変数（およびミキシン）を探す傾向があります。確かに、私はしばしば1回または2回のみ使用される無数の変​​数を見つけます（言い換えれば、それだけの価値がありません）。 それが終わったら、それはあなたの電話です。 base

フォルダー内のすべてが実際にはベースのものであり、コンポーネントに関連していないことを確認するか、

レイアウトフォルダーを確認して、全体的なレイアウトはそこに存在し、正しく文書化されています 最後に、コンポーネントに取り組む必要があります。これは、巨大なタスクである可能性があります。ここでの私のアドバイスは、コンポーネントをできるだけ小さく再利用できるようにすることです。数字を2倍にしても、コンテキストを不可知論し、読みやすく、理解し、更新できる限り、それは関係ありません。 たとえば、

これほど小さいコンポーネントを持っていることは悪いことではありません：

モジュラーを考えてください。小さい。単純。独立者。

過剰

を取り外します

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

良いCSSと悪いCSSの最大の違いは、それをWork™にするために必要なコードの量だと思います。言語としてのCSSは、簡単に把握できます。誰でも、ほぼすべてのレイアウトを少しの試行錯誤で作成できます。しかし、それを機能させるために必要な最小限のCSSで何かを構築できること、そしてそれをそのように保つことは本当の挑戦です。

3年以上経ちましたが、ニコラス・ギャラガーからのこのツイートは、CSSについての私のお気に入りの引用のままです。

「悪い」CSS内で、「良い」CSSを書くのは非常に困難です。 「良い」CSS内では、「悪い」CSSをボルトで締めてコード腐敗を開始するのは非常に簡単です。 - ニコラス（@necolas）2012年9月26日

陳腐化はCSSの本当の疫病です。 CSSで何かを構築するとき、私たちはしばしば行き来して、いくつかのことを試してみます。通常、いくつかの不必要な宣言になります。たとえば、オーバーフロー：不要になった隠されたもの、または違いを生じないフォントサイズ。それらを離れることにより、私たちは技術的な負債を積み上げます。それはbad™です。

cssを書いているとき、CSS作業を犯す直前にやりたいことは、開発者ツールを開き、それぞれがそれぞれに影響を与えるかどうかを確認するために書いた各CSS宣言を切り替えることです。彼らがそうしないなら、私は彼らがそもそもなぜそこにいるのかを自問します。それらが不要であることが判明した場合、私はそれらを削除します。これと同じくらい簡単なことをすることで、便利なジャンクフリーのコードのみがリポジトリにプッシュされるようにします。

クリーンアップCSSコードベースも同じです。クリーンアップしたいコンポーネントを見つけ、DevToolsを開き、役に立たない宣言を見つけてみてください。いくつかのCSSを削除するために、カスケードの恩恵を受けるために木の上のスタイルを動かす必要がある場合があります。次の例を最小限に削減することを考えてみてください：

これを最適化するためのきれいな方法は、色を動かすことです。赤い宣言は親になり、カスケードに残りをさせます。もちろん、実生活の例は通常より複雑ですが、それは私たちが時々

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

c

in *c *ss。 cssは賢いです、あなたも

でなければなりません

私が頻繁に出くわすのは、継承、初期、および電流の値についての理解の欠如です。リンクをコアテキストと同じ色にしたいとします（下線で十分なので）。以下は、

bad の方法です それが貧弱な解決策である理由は明らかです。ボディコピーの色を変更すると、リンクの色が非同期化されます。変数を使用することを考えている場合、あなたは物事を不必要に複雑にしています。それに加えて、リンクが灰色の段落になった場合（たとえば、ブロッククォート内）、色と一致しません！

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

CSSには、継承値を備えたこれを処理する方法が組み込まれています。

それはそれと同じくらい簡単です。これにより、リンクは常に親の色を継承します。また、先祖の色を継承している可能性があります。

同じ行に沿って、プロパティをデフォルト値に再編成するとき、ハードコードの前述の値には不十分な考えです。 CSSには、このようなシナリオの最初の魔法の価値が正確です。通常、違いはありませんが、テキストアライグなどの方向ベースのプロパティのように、実際に重要な場合があります。テキストアライグをリセットすると、RTL言語で左の設定が損傷する可能性があります。初期は行く方法です（またはさらに良い、開始しますが、この値はIE9でサポートされていません）。

最後になりましたが、CurrentColorを知らないCSS開発者の数はあまりにも高いです。あなたがそれについて知らないなら、気分が悪くないでください、しかし、これを自問してください：境界色の色を指定しないとき、それは要素の色と自動的に一致することですか？まあ、これは、ボーダーカラーのデフォルト値がCurrentColorであるために起こります（仕様を確認）。かなり明白な名前、あなたは認めるでしょう 私のポイントは、何かが要素のフォントと色を共有したい場合は、ハードコーディング値やSASS変数ではなく、CurrentColorを使用します。

これらはすべて基本的なCSS機能です。彼らはCSSをそれが何であるかを作るものです。それでも、彼らは信じられないほど十分に使用されています。したがって、コンポーネントのコードを改善する必要がある場合、これらはあなたがしたい改善の種類です。

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

git good

を取得します

CSSコードベースのリファクタリングは、

作業の多くです。何十ものファイルを更新する可能性があります。また、途中で物事を壊す可能性があります。正直に言って、私たちは皆間違いを犯し、そのような大きな変化に対処するとき、あなたが小さな失敗さえなくすべてを掃除することに成功したなら、それは非常に印象的です。 このため、バージョンコントロールで非常に熱心になることを強くお勧めします（ここでGitを想定するのは公平だと思います）。それは、紛争で地獄のように苦労することなくバグを含むステップに戻ることができるように、1つのことと1つのことを行うことをコミットすることを意味します。

多くの人にとって、Gitは硬くて不明瞭であり、それをシンプルにする方法を掘り下げることは、この記事の範囲外であることを知っています。あなたはこれについて私を信頼しなければなりません：あなたが怒ってしたくないなら、あなたのgitの歴史を詩にする。

それを包みます

まとめて、少しtl; CSS/SASSプロジェクトのクリーニングは、CSSの更新または削除の影響を評価するのが難しいため、困難です。これは主に、CSSがほとんどテストできないためです。このため、注意する必要があります コードを並べてきれいになるように始めます。これから始めて、後であなたの人生を楽にしてください。これはまた、あまり危険せずにコードベースの状態の貴重な概要を獲得する良い方法でもあります（構文の汚れを修正することは、問題を引き起こす可能性は低いです）。

次に、プロジェクトが構造方法論を採用していることを確認してください。適切に行われている限り、どちらが問題ではありません。プロジェクトが実際にコンポーネントに組織化されていない場合、これはこのパスで開始する良い機会になります。インターフェイスの再利用可能なチャンクを見つけ、スタイルを独自の部分に抽出します。それが簡単になり、進行の感触が得られるように、少し文書化してください。

プロジェクトをクリーンアップして、すべてを適切な場所に置いたら、CSS自体を改善する時が来ました。最初に物を削除できるかどうかを確認してください。私たちはしばしば、あまりにも多くのコードを書きすぎます。次に、コードを最適化して、繰り返しが少なくなります。ただし、過度にエンジニアリングしないように注意してください！追加するのではなく、複雑さを削除することになっています。また、一見しては明白ではないように思えるかもしれないあなたがすることすべてを自由にコメントしてください。

最後に、定期的かつ論理的に仕事をしてください。それぞれ1つのことをして、小規模なコミットであなたの変更を束ねるので、何かがうまくいかない場合は歴史に戻るのは簡単です。

最後になりましたが、終わったら祝うことを忘れないでください。頑張ってください！

CSSコードベースのクリーンアップに関するよくある質問（FAQ）

CSSコードベースをクリーンアップすることの重要性は何ですか？冗長または不要なCSSコードを識別するにはどうすればよいですか？未使用または冗長CSSコードを識別するのに役立ちます。これらには、ブラウザ開発者ツール、CSSカバレッジツール、さまざまなオンラインサービスが含まれます。さらに、特にコードの冗長性や矛盾を特定するために、手動コードレビューも有益です。 CSSコードベースには、未使用または冗長コードの削除、論理的で一貫した方法でコードの整理、コメントの複雑なセクションを説明するコメントを使用し、一貫した命名規則。さらに、CSSプリプロセッサを使用すると、大規模なコードベースの管理と維持に役立ちます。

CSSコードベースがそもそも厄介になるのを防ぐにはどうすればよいですか？実践。これには、モジュール式の再利用可能なコードの作成、一貫した命名条約を順守すること、コメントを使用してコードの複雑なセクションを説明することが含まれます。さらに、定期的なコードレビューは、より大きな問題になる前に早期に問題をキャッチするのに役立ちます。 CSSコードベースのクリーンアップ。これにより、変数、ネスト、ミキシン、およびコードをより読みやすく保守可能にすることができるその他の機能を使用できます。さらに、模倣やオートフィックスなどのタスクを自動化し、コードベースの清潔さと効率をさらに向上させるのに役立ちます。

CSSコードベースのクリーンアップは、Webサイトのパフォーマンスを改善する方法をどのように改善しますか？

CSSコードベースのクリーンアップは、ブラウザでダウンロードして解析する必要があるコードの量を減らすことでWebサイトのパフォーマンスを改善できます。これにより、読み込み時間が短くなり、ユーザーエクスペリエンスがスムーズになります。さらに、不必要または冗長コードを削除すると、パフォーマンスに影響を与える可能性のある競合やバグの可能性を減らすことができます。インパクトSEO。不必要なコードまたは冗長コードの量を減らすことで達成できるより速い負荷時間は、検索エンジンのランキングの要因です。さらに、クリーンでよく構造化されたコードベースを使用すると、検索エンジンボットがサイトをクロールしてインデックスを作成しやすくなります。 🎜> CSSコードベースをクリーンアップするプロセスを自動化できるツールがいくつかあります。これらには、CSSの前処理装置、リナー、およびミニファイヤーが含まれます。さらに、コードベースを分析して改善のために領域を識別できるオンラインサービスがあります。 、コードベースのサイズ、それに取り組んでいる開発者の数、およびプロジェクトの複雑さを含む。ただし、一般的なルールとして、定期的なコードレビューとクリーンアップは、コードベースがクリーンで保守可能なままであることを保証するための開発プロセスの一部である必要があります。 > CSSコードベースのクリーンアップは、特に大規模なレガシーコードベースの場合、複雑なタスクになる可能性があります。課題には、未使用または冗長コードの識別、古いブラウザーとの互換性の維持、変更が既存の機能を破らないようにすることが含まれます。さらに、特にプロセスを自動化するためのツールを使用せずに、時間がかかる場合があります。

以上がCSSコードベースのクリーンアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。