比較的大規模な Web サイトを構築する場合、最初から CSS 構造を適切に範囲設定して編成する必要があります。CSS フレームワークが使用されていない場合は、すべてをまとめて巨大なスタイルシートにすることができますが、これはすぐに故障し、メンテナンスの負担が大きくなる可能性があります。
過去数年間、私は自分のスタイルシートを base.css、layout.css、fonts.css、elements.css などのさまざまなファイルに分割してきましたが、スタイル定義はファイル間を簡単に移動できるため、このアプローチはさらに改善する必要があります。厳しい。私はフレームワークを使用していません。なぜなら、私は CSS コード内の事前設定された列や事前定義された要素が好きではないからです。
物事を整理するために、どのようなアプローチ、パターン、またはヒントを提案できますか? どのような命名規則、再利用の実践、およびパターンが有用ですか? これは、フレームワークを使用する必要があるものですか?
以前はLESSが大好きでしたが、今ではStylusの大ファンです。なぜなら、LESS/SASS/CSS よりもさらにクリーンなコードになると思うからです。セミコロン、コロン、または括弧がありません。
Stylus (および LESS と SASS) では、変数、テンプレート、および関数を定義できるため、次のファイルがあり、この順序である必要があります。
border-radius、transitions、clearfix などのテンプレートこれらはすべて連結され、単純なビルド スクリプトを使用して CSS にコンパイルされます。
これらがどのように見えるかを見ることができます。このための GitHub リポジトリを作成しました。
一貫性のある管理しやすいスタイルシートを作成するには、CSS LESS フレームワークが非常に役立ちます。
LESS は、CSS コードを動的に記述するための変数、ネスト、ミックスイン、演算子、関数などのメカニズムを提供し、Node.js または Rhino を使用して、クライアント側 (Internet Explorer 6+、WebKit、Firefox) およびサーバー側で実行できます。
Stylus に関して — セミコロン、コロン、およびブラケットの欠如は、コードをより読みにくくします。