CSSをリファクタリングする方法 - ガイド

管理しやすく最適化されたコードベースを持ちたいのであれば、CSSリファクタリングはフロントエンド開発ワークフローの重要な部分である必要があります。 CSSをリファクタリングすると、 既存のコードを整理して再編成する 新しい機能を追加したりバグを修正することなく.

リファクタリングが役立ちます CSSの爆発を防ぎ、コードの読みやすさと再利用性を向上させる, そして CSSをより滑らかにし、実行を速くする.

遅かれ早かれ簡潔で体系化されたコードベースで開始したプロジェクトでも明快さを失い始めるので、リファクタリングは通常しばらくすると必要になります。一貫性、時代遅れの規則、および重複するコード部分が表示されます。そして私達はまたスタイルを無効にし始め、ますます多くのハックと回避策を採用し始めています.

CSSのコードベースを保守可能に保つための最善の方法は、 “早くリファクタリング、しばしばリファクタリング” 経験則この記事では、効果的なCSSリファクタリング・プロセスを実行する方法についていくつかのヒントを見ていきます。.

1.初回監査を実施する

私たちがリファクタリングする必要があるものについてより良い絵を持つためには、それが 私たちが現在持っているものを見るために包括的な監査から始めます.

このような努力で私たちを助けることができるたくさんの素晴らしいオンラインツールがあります。 CSSDigは、WebサイトのCSSを分析し、あまりにも具体的なセレクターや反復的なプロパティなどの弱点を探る、強力なChrome拡張機能です。.

未使用のCSSは未使用のCSSルールを調査しますが、CSS Lintなどのツールを使用すると、互換性、保守性、その他の問題をすばやく見つけることができます。.

アーキテクチャーレベルでの多くの問題はこの方法でしか捉えられないため、初期監査中に手動でコードを精査することも重要です。.

管理可能な計画を立てる

作業コードのリファクタリングは常に大変な作業ですが、必要な作業について計画を立て、リファクタリングプロセスを管理可能なチャンクに分割し、実行可能なスケジュールを作成すれば、痛みを和らげることができます。.

CSSのリファクタリングでは、常に考慮しなければならない重要なことがあります。セレクタ名を変更すると、 関連するHTMLおよびJavaScriptファイルのコードを調整するために必要 同様に.

それはそれ故に良い考えです 実行する必要があるこれらの追加の変更を追跡します。, そして 私たちのリファクタリングスケジュールにそれらを組み込んでください CSS関連の主要タスクと一緒に.

進捗を追跡する

リファクタリングに着手する前に、それはに不可欠なステップです。 初期ファイルをバックアップする. GitやSubversionなどのバージョン管理システムをワークフローに導入することで、実行した一連の手順に関するレジストリが作成されるので、リファクタリングプロセスを大幅に改善できます。 やり直したい場合は、前の段階に戻ることができます。.

4.コーディングスタイルガイドに従う

コヒーレントコーディングスタイルガイドは、コードの読みやすさと保守性を著しく向上させることができます。 CSSコーディングスタイルガイドを設定する.

決定すべき重要なことは以下のとおりです。

命名規則
フォーマット規則
宣言順
使用したい単位と値
コメント規則

独自のコーディングスタイルガイドを作成したくない場合は、GithubにあるThinkUpなどの他の人のガイドブックを使用することもできます。.

コーディングスタイルガイドを紹介するだけでは十分ではありません。 コードを書き換えるときはそれに固執する リファクタリング中 他の皆に同じことを期待する 私たちのプロジェクトに携わる人.

5.コヒーレントファイル構造の設定

準備が整ったら、最初にやるべきことは、CSSのカスケード特性に注意を払う適切なCSSファイル構造を設定することです。.

それは主にプロジェクトにどのようにして私たちのファイルを編成するのが最善かによりますが、別のものを使うなど、いくつかの普遍的な規則があります。 normalize.css CSSリセットスタイル用のファイルです。 global.css プロジェクト全体で使用されるグローバルスタイル、およびサードパーティのライブラリを別のフォルダに格納するため.

CSSのファイル構造を安全に利用したい場合は、SMACSSやITCSSなどの既成のアーキテクチャも必要です。 CSSファイルをスケーラブルに整理する方法.

6.未使用の重複したルールを取り除く

しばらくすると、CSSファイルには通常、リファクタリング中に識別して整理する必要がある未使用のルールがたくさんあります。私たちを可能にする多くのオンラインツールがあります これらの時代遅れのルールを調査する, そして時々私達がそれらをすぐに捨てることを可能にします.

この目的のための最もよく知られているツールは、おそらくUnCSS、Node.jsモジュールです。これは、使われていないCSSルールをすばやく取り除くことを可能にし、洗練された設定オプションも提供します。.

それを考慮に入れることが重要です 未使用のルールを削除したくない すべて 私たちが持っているCSSファイル, たとえば、global、reset、またはサードパーティのスタイルシートからです。 それらを除外する クリーニング中.

廃止された規則に加えて、重複した規則も余分なコードの肥大化とパフォーマンスの低下を招きます。 CSS Purge Node.jsモジュールを使用してそれらを削除することができますが、と一緒に作業することもできます。 重複ルールを検索するためのCSSリンター CSSファイルに.

7.特異性を減らす

CSSセレクターの具体性は、それが含むインナーセレクターの数と種類から計算されます。 CSSの特殊性は4桁の数字で表されます。これは、この視覚的なCSS固有性計算ツールをチェックすると最も理解しやすいものです。

最も低い特異度（0001）は、一般的なHTML要素を1つだけ対象とするセレクターに属します。

または

. 複合セレクタに含まれる内部セレクタが多いほど、その特異性は高くなります。.

のような特定のセレクタ id またはインラインスタイルからのセレクタは、より一般的なセレクタに属するスタイルをオーバーライドするため、優先順位が高くなります。例えば、 ＃id1 セレクターは 0100.

リファクタリングでは、目的はセレクタの可能性がある限りセレクタの詳細度を低くする（短くする）ことです。 より高い特異性を持つセレクターはセレクターの再利用性を著しく減少させる, そして コードベースが肥大化する.

3つの主な種類の高特異性セレクターは次のとおりです。

資格のあるセレクター, といった p.class1 （定義する p タグはここでは不要です。同じクラスを他のHTML要素と一緒に使用することは不可能になるからです。）
深くネストされたセレクタ, といった .クラス1。クラス2。クラス3。クラス4…
ID, といった ＃id1

ステップ1で説明したCSSDigのようなオンラインツールを使用して、これらの高い特異性のセレクターをすばやく見つけることができます。ネストの最大レベルや使用制限などに関する規則をコーディングスタイルガイドで設定すると便利です。 id セレクター.

8.雑草 `!重要` 規則

CSSルールの後に !重要 ステートメントは通常のスタイルルールを上書きします。を使う !重要 遅かれ早かれルール インコヒーレントコードにつながる. ほとんどのリンチツールがそれらをエラーとしてマークするのは偶然の一致ではありません.

私たちが素早くCSSを書く必要があるとき、私たちはそれらの単純さのためにそれらに頼り始めるかもしれません.

主な問題 !重要 宣言は、将来それらをオーバーライドしたいのであれば、もっと多くのものを追加する必要があるということです。 !重要 宣言が使用されているので、リファクタリングプロセス中に可能な限り削除することをお勧めします。.

9.マジックナンバーとハードコードされた値をきれいにする

私たちの日常のCSSワークフローの間に、私たちは解決できない問題にぶつかることがあり、そしていわゆる私たちは使い始めます。 マジックナンバー, 何らかの理由で機能する値ですが、理由がわかりません。たとえば、次のようにします。

 .クラス1 位置：絶対;上：28ピクセル。左：15.5％。

マジックナンバーの主な問題は、それらが 状況的な, そしてそれらは具体化します “順列によるプログラミング” アンチパターン。リファクタリングの過程で、コードからこれらの恣意的なルールを削除し、可能な限りそれらをより合理的な解決策に置き換える必要があります。.

同じ経験則が適用されます。 ハードコーディングされた値 同様に。おそらく、最も頻繁に発生するハードコード値は、行の高さの規則にあります。

 / *悪い、我々は追加の固定行の高さの規則を.class1 * / .class1の子要素に追加する必要があるでしょうfont-size：20px;行の高さ：24ピクセル。柔軟な行の高さの規則は、子要素でも安全に使用できます* / .class1 font-size：20px;行の高さ：1.2。

ハードコードされた値は私たちのコードを将来性がなくなり、より堅くします。そのため、リファクタリングの一部としてそれらを掘り下げる必要があります。 柔軟な値に置き換えてください.

10.単位と値のリファクタリング

将来のメンテナンスとデバッグを容易にし、次のように異なるユニットを使用することで発生する可能性がある障害を回避するため。 em そして px, 同時に、私たちはする必要があります 相対値と絶対値の使用方法に関する一貫した規則を守る.

過去に矛盾して使用した場合は、それらが簡潔なシステムを構成できるように変換する必要があります。

私たちのサイトであまりにも多くの同じような色を使用している場合、それはまた賢明なことができます 配色を合理化する 使用する色の数を減らすことによって。（これは、実際にウェブサイトの配色を選択する方法についての投稿です。）