1

時間の経過とともにどんどん大きくなる CSS ファイルを管理するためのさまざまな方法を見つけようとしています。これにはいくつかの理由があります: レスポンシブ デザインを使用した Web サイトの作成、追加のスタイル設定が必要なプラグイン、または 1 つの要素のページ固有のスタイル設定のみ。

私がすでに使用しているいくつかのテクニックがあります。

  • 目次の作成
  • コードを名前付きセクションに分割する (目次で参照)
  • 要素の名前空間 ( .home-gallery、.home-gallery-imageなど.home-gallery-link)

ただし、各要素のプロパティをどのように配置するかという問題はまだあります。

すべてを 1 行にまとめると、可読性が大幅に低下します。一方、すべてのプロパティを 1 行に配置すると、スクロールバーがシャワーの下に座って泣くようになります。

私は現在、いくつかの異なる形式を試していますが、ここに私が思いついたものがあります:

  • タイプに応じたプロパティの並べ替えと整理
  • 集計/間隔を使用して、一種のテーブル ルックを作成します (左側のキャプション: 要素、右側のコンテンツ: プロパティ)。

例では、次のようになります。

#content-wrapper {
                    position: relative; top: 0; left: 0;
                    width: 100%; height: 200px;
                    color: #333; background: #fff;
                 }

今のところ、無限にスクロールする/コードを検索することと、コードを読みにくくすることとの間の唯一の妥協点のように思えます。

私の質問は次のとおりです。読みやすさとさらなる開発を可能にするために、どのような CSS 記述手法を使用していますか?

4

2 に答える 2

1

以下のサンプル:

/* indented multi-selectors */
  #content-wrapper
, #content-wrapper > something else {
      /* alphabetic listing of properties, organizing attributes in blocks */

      background-color:    #fff;
      border-left-width:   2px;  /* column layout with blockwise different positioning */

      /* separation of blocks */
      color:    #333;
      height:   200px;
      left:     0;
      position: relative;
      top:      0;
      width:    100%;
  }

おそらく、個々のプロパティのフォーマットと編成よりも重要なのは、特にルールの順序付けについて、共謀するクラスと適切なドキュメントに基づくクリーンな構造です (これは確かに私のプロジェクトにありました。多くの場合、その逆です ... ;-)。

まともな折りたたみエディターは、頻繁なスクロールの必要性を十分に軽減します。もちろん大画面も。

于 2013-08-29T18:00:25.337 に答える
1

1) HTML の要素の順序でスタイルを定義します。例: html{ } head{ } body{ } 同様に順序で そのため、スクロール中に要素を簡単に見つけることができます。

2)メディアクエリが含まれる場合、画面幅の順にスタイルを記述します。画面幅の広いものから低いものへ。これにより、メディア要素用に記述されたスタイルを簡単に見つけることができます。そこでも最初の点に従います。

3)形式のスタイル。それはほとんどあなたがしたようです。

4)書類の保管。

于 2013-08-29T18:01:00.247 に答える