2012-04-06 9 views
5

比較的大きなウェブサイトを構築する場合、CSS構造は適切にスコープされ、初めから整理されるべきです。 CSSフレームワークが使用されていない場合は、すべてが大量のスタイルシートにまとめることができますが、これは非常に素早く順不同になり、大きなメンテナンス責任になる可能性があります。CSSコードを整理するための構造化された方法

私は過去数年間、私のスタイルシートをbase.css、layout.css、fonts.css、elements.cssなどのさまざまなファイルに分割しましたが、スタイル定義はファイルとこのアプローチの間を飛び越えることができますより厳密にする必要があります。私はフレームワークを使用していません。なぜなら私はCSSコードのプリセットされた列と定義済みの要素のファンではないからです。

物事を整理するためのアプローチやパターン、ヒントはありますか?どんな種類の命名規則、再利用可能なプラクティス、パターンが有用ですか?これは、フレームワークを使用すべきものですか?

+2

私はこの質問は、StackOverflowのQ&A形式の1つの最良の答えのアイデアに非常によく役立たないと思う。 – jfriend00

答えて

5

私はLESSを愛するために使用されるが、私はそれがLESS/SASS/CSSよりもさらにクリーンなコードになると思わないので、今、私はStylusの大ファンです - 何セミコロン、コロン、またはブラケットを。

スタイラス(およびLESSとSASS)を使用すると、変数やテンプレートや関数を定義することができますので、私はこの順序である必要があり、以下のファイルが、持っている:

  • リセット - Eric Meyer's CSS reset
  • のスタイラスバージョンを
  • 変数 - 色、フォントなどの変数など
  • テンプレート - border-radius、トランジション、clearfix
  • 各ページのスタイリング(ホームページ、アプリ、サービスの観点から、など)
  • のようなテンプレート

これらはすべて、単純なビルドスクリプトを使用して連結され、CSSにコンパイルされます。

これらはどのように見えますか。私はこのようなもののためにa GitHub repoを作った。

4

一貫性があり管理しやすいスタイルシートを書くためにCSS LESS Frameworkは非常に有益です。
LESSには、CSSコードを動的に記述するための変数、ネスト、ミックスイン、演算子、および関数があり、クライアントサイド(Internet Explorer 6+、WebKit、Firefox)およびNode.jsまたはサーバーサイドで実行できます。 Rhino。

http://lesscss.org/

3

スタイラスについて - セミコロン、コロン、および角括弧がないと、moresoではなくIMOのコードが読みにくくなります。