リファクタリングのためのツールとテクニック

Question

もっと一般的にこれを行う必要がありますが、現在の例は私の2つのメニューです。私はhorizontal-menuとvertical-menuの2つのメニュークラスと、これらのクラスの下でul,li、およびaのような要素の2つのルールセットを持っています。これらのルールの多くには、a要素の値がcolorのように共通するものがあります。私は共通のルールと値をmenuと呼ばれる「スーパークラス」にリファクタリングしたいと思います。また、私のhorizontal-menuとvertical-menuクラスの値をオーバーライドするだけです。これを手伝ってくれるツール（この質問をするツール以外に）はありますか？

Answer 1

この種の問題の最も良いツールは、生産に使用するためにCSSにコンパイルされたルールを定義するフレームワークであるCompassです。命令型言語と同じように変数を定義することができます。

mixinsなどの他の便利な概念もあります。これは、定期的に一緒に使用される一連のCSSプロパティの定義を可能にし、複数の標準CSSルールにそのブロックを含めることができます。そのミックスインを1か所で編集し、プロパティを変更し、その変更をミックスインが使用されているCSSルールに伝播させることができます。

私はこのケースでは（そして実際にはほとんどの場合）唯一の問題は、あなたが本当にしてゼロからスタートしなければならないということであるコンパスを発見し、それがCSS Tricks

でChris Coyierによってa screencastのおかげで、使用する方法を学びましたコンパス、またはワークフローを既存のものに統合する方法を見つけることができます。

Answer 2

csscssをショットしたいと思うかもしれません。自分のスタイルシートで自分がどれくらい繰り返されているかを知るために書きました。私は明らかに偏っていますが、多くの人が役に立つと感じています。 SASS、LESS、コンパスサポートは焼き付けられます。

もう1つのすばらしいツールは、ブラウザで実行され、未使用のルールを知ることができるjavascriptツールであるheliumです。