2009-08-04 19 views
2

私は過去にさまざまな人々によって以前に改造されたウェブサイトを整理しています。ここ は、私はCSSが適切tidyupで行うことができると思いCSSを整理する最良の方法は何ですか?

..私は持っているページのスケルトンです。私は交換するために、このhttp://meyerweb.com/

のようにリセットを使用して考えた:

*{margin: 0; padding: 0;} 

を、多分fonts.cssにCSSを分割、layout.css私が取り組むことができる方法

任意の考え、提案この問題は感謝します。

答えて

5

CSSをより正式なCSSフレームワークでカプセル化したい場合があります。このアプローチの良いところは、それがクロスブラウザの問題を修正するために多くの労力を活用していることであるhttp://www.blueprintcss.org/

独自のカスタムフレームワークを作成することができますが、そのようなYahooのYUIとブループリントCSSなどのいくつかの有用なオープンソースのCSSフレームワークがありますフォントとレイアウトの周り。

どこまで行くかによって、既存のマークアップに広範囲に触れる必要があります。あなたのサイトの大きさに応じて、私は段階的にスタイルを調整し、正式なCSSフレームワークに移行しようとします。長期的に見ると、フレームワークの概念に精通した他の開発者がCSSを扱いやすく、理解しやすくなります。

冗長で未確認のスタイルを漸進的に排除しようとします。

また、debug.cssファイルも作成します。すべての古いスタイル名を取り、それらに識別スタイルを追加します。例:

.myoldstyle {border: solid 1px red}; 

次に、サイト全体で古いスタイルがどこで使用されているかを検出できます。各スタイルは、新しいシステムを考慮して移植する必要があります。古いシステムの特定のスタイルが新しいシステムに正しく移行されると、debug.cssファイルから識別スタイルを削除(またはコメントアウトすること)することができます。 debug.cssが表示出力に副作用を示さない場合、すべてのスタイルを移行したと確信できます。

時間がかかりますが、体系的にアプローチすると効果的です。

また、CSSをまったく使用していないサイトを探してみることもできます。コードの論理的意味論的マークアップを理解してください。きれいなHTMLコードベースを持つと、スタイルの癖をデバッグする際に役立ちます。 LookAndFeelスタイルシート内のすべての色に関する情報を保持し、レイアウト、タイポグラフィ、のLookAndFeel、ナビゲーション

:CSSの組織のための

としては、私は基本的なカテゴリに分けるのが好き。これは、クライアントの視覚的趣味や欲望を満たすために最も多くの時間を費やす場所です。それは独立した論理的なスタイルシートであることを保つのが便利です。他のものはより機能的で標準化されています。この抽象化により、スタイルの視覚効果を分離することがはるかに容易になります。

最後に、FirefoxのfirebugプラグインまたはSafariのdebbuggerをチェックしてください。これらは計算されたスタイル(さまざまなスタイルが適用されるときにスタイルと要素が最終的に導出される方法)を表示し、複雑なCSSの特定のスタイル変更の効果を調べたいリアルタイムで特定のスタイルを調整できますシステム。

さらに重要なのは、別のie.cssファイルを保管しておくことです。これはヘッダーで参照される最後のスタイルシートでなければなりません。 IEの回避策が必要な場合は、ここに記入してください。そして、このスタイルシートを条件付きコメントを通じてIEに公開するだけです。

http://www.quirksmode.org/css/condcom.html

IE 6の問題を解決するための最速の方法であること。

3

おそらくここから始めるのがいいでしょう。Common mistakes for CSS-designers to avoid?ここにStackoverflowを読んでください。そのスレッドで述べたように、リセットファイルは一般的には良いアイデアとみなされます。私はまた、あなたのCSSをW3C CSS Validatorを通して実行し、警告またはエラーを発見します。また、超音速スタイルとそれよりも長いものを削除することも良い考えです(私はこれを行う方法がわかっている唯一の方法は手作業によるものです)。

+0

+1、偉大な答え –

+0

+1良い返信のため –

1

Firefoxには、使用されていないクラス/ IDを削除するために、Dust-Me Selectorsという大きな拡張機能があります。 CSSファイルは複数の場所からインクルードされている可能性があるため、注意して使用することをおすすめしますが、役に立つ助けになります。

+0

それは便利なアドオンについて知りませんでした! –

+0

必須のアドオンの1つ! – Scoregraphic

0

SASSCompassを使用して開始します。ミックスイン、変数、その他の素晴らしい素敵なもの。あなたのコードのCSSはDRYとメンテナンス可能になります。また、YUI、Blueprint、960などのグリッドフレームワークでうまくプレイし、必要なセマンティックエッジを提供します。

0

TopStyleは、コードをクリーンアップするという点で他にもいくつかのCSSツールができる優れたアプリです。我々のポータルの大規模なCSSファイルで、他のツールでは見つけられなかった無数の冗長スタイル、ルール、属性を分離することができました。それは本当に最高のCSSツールです。デモ版にはわずかな制限がありますが、ほとんどのことがまだ完了しています。

1

私はCSSリセットを大いに信じています - 特にEric Meyerのリセットですが、既存のサイトにリセットすることを試みるのは本当に面倒です。

あなたは本当に膨大な量のCSSを持っていないので、すべてを1つのファイルにまとめて手動で整理/最適化したいと思うでしょう。

Natalie DowneさんのプレゼンテーションをCSS Systemsでチェックしてください。スライドショーには含まれていない大量のノートが含まれていますので、PDFをお読みください。

関連する問題