16

ゼロD

誰もがすべてのスタイルを含む単一のファイルでCSSを使い始めます。

  • style.css

1D

すぐにかさばり、CSSをページ要素ごとにいくつかのファイルにグループ化することにしました。

  • html_elements.css
  • header.css
  • main-area.css
  • footer.css

これは十分に便利ではなく、機能ごとにスタイルをグループ化する人もいます。

  • typography.css
  • layout.css
  • sticky-footer.css（フッターだけでなく、多くの要素の宣言が含まれています）

2D

プロジェクトに多くのCSSがある場合、両方のグループを同時に使用する必要がある場合があります。CSSファイルの構造は2次元になります。

layout/

  • grid-system.css
  • header.css
  • sidebars.css

look/

  • typography/
    • main.css
    • headers.css
    • lists.css
  • backgrounds/
    • html_elements.css
    • header.css
    • main-area.css
    • footer.css

さて、例は作成されていますが、あなたは確かに私が何を意味するのか理解しています。

この時点まではすべて問題ありません。

メディアクエリを入力してください

これは私のCSS構造がファンクアップするところです。

上記の2D構造に加えて、メディアクエリによってコードを構造化する必要があります。

  • 私のスタイルのいくつかは普遍的です（どこにでも適用されます）
  • 一部は特定の画面サイズにのみ適用されます。
    • 小さい;
    • 中くらい;
    • 大きい;
    • 特大。
  • 一部は、画面サイズの特定のグループに適用されます。
    • 小さい（非モバイルスタイル）を除くすべて。
    • 小中（サイドバーが側面にない場合）
    • largeおよびxlarge（サイドバーがある場合）

私は、既存のCSSファイル間でメディアクエリスタイルを分散させることによって問題を克服しようとしました。ブレークポイントのコンパス拡張機能は大いに役立ちますが、スタイルシートが乱雑になりすぎます。ファイルに記述されていないときに特定のスタイルを見つけると、多くの苦痛が生じます。

メディアクエリ、次に要素と機能でグループ化してみました。ただし、ファイル構造は2次元であるため、新しいディメンションを追加することはできません。追加できるのは、別のレベルの階層のみです。だから、それは優雅ではありません。また、それは非常にかさばります。

そのため、一方の軸にメディアクエリがあり、もう一方の軸に要素と関数の醜い組み合わせがある2D構造になります。

私はそれに完全に満足していませんが、私はただ優雅な解決策を思い付くことができません。提案してください。

4

4 に答える 4

19

CSSはすでに構造化された言語です。良くも悪くも、コードの順序によって意味が変わります。そのため、CSS編成スキームは主にカスケードによって決定されることが重要です。CSSの他の構造的側面はセマンティクスです。あなたの利点にそれを使用してください。組織の関心事は、物事を有意義で維持しやすいものに保つことです。意味を保持するためにできる最善のことは、関係を示すことです。関係はすでにセマンティクスによって表現されています。

これらを組み合わせると、最初に特異性、次にセマンティクスによって編成されたコードになりますが、タイプとレイアウト、画面サイズなどの外部の概念によって編成されることはありません。これが私の命名スキームです：

base/
  - Sass imports and settings - no CSS output.
  - e.g _grid, _colors, _rhythm, etc.
general/
  - Initial CSS baseline with resets, defaults, font imports, and classes to extend.
  - e.g. _reset, _root, _fonts, _icons, _defaults, etc.
layout/
  - The rough outline of the site structure.
  - Not "layout" as a set of properties excluding type, "layout" as the overall site template which might well include typography. 
  - e.g. _banner, _nav, _main, _contentinfo, etc.
modules/
  - All the details. First by effect (classes/general), then by widget (ids/specifics).
  - e.g. _users, _admin, _product-lists etc.

メディアクエリは、影響を受けるコードにできるだけ近づける必要があります。可能であれば、それらは直接インラインになります（Sassメディアのバブリングを使用）。それがかさばる場合、それらはブロックの外側に移動しますが、部分の外側には移動しません。MQはオーバーライドです。コードをオーバーライドするときは、オーバーライドされているものを正確に確認できることが特に重要です。

一部のサイトでは、この構造をさらに進めることができます。最後に2つのフォルダーを追加することがあります。plugins/サードパーティのコードを管理するoverrides/ためと、ウィジェットに対する避けられない（回避してみてください！）場所固有のオーバーライドを処理するためです。fonts/また、フォントファミリごとにパーシャルを含むusers/フォルダー、または追加、編集、表示などを行うためのパーシャルを含むフォルダーを追加して、さらに深く掘り下げました。詳細は柔軟ですが、基本的な構成は同じです。

  • 一般的に開始します。
  • できるだけゆっくりと詳細に向かって移動します。
  • 外部の概念（タイプ/レイアウト、画面サイズなど）に基づいて分割しないでください。
于 2012-10-10T16:58:47.167 に答える
1

次のようなものを試してみませんか：

/root
  /modules
    /header
      /html
        header.html
      /css
        module_styles.css /*Configure which style sheets are included with @media rule in this file*/
        /at-media
          small.css
          medium.css
          large.css
      /js
        fancy-nav.js
  /site
    includes.css /*use @import to include each modules stylesheet in a file here and let each module control its own media issues*/
于 2012-10-10T15:39:21.463 に答える
1

私がやっていることは、あなたの2Dソリューション（私のものにはもう少し入れ子がありますが）と、必要に応じてメディアクエリを一列に書くためにBreakpointを使用することです。対処する必要があることの1つは、出力CSSが手書きのコードと同じようには見えないことです。これは、CSSプリプロセッサを使用し、具体的には抽象化するという現実です。間もなく、Google Chromeの開発ツールにはSassの部分的なサポートが組み込まれる予定です。また、Firefox用のFireSassがあり 、スタイルがどこから来ているのかを把握するのに役立ちます。

これらの助けを願っています！

于 2012-10-10T15:45:50.147 に答える
1

さて、これは個人的な好みの問題であり、実際には質問に答えていない可能性がありますが、ここに私の貢献があります：

私がやっていることは、あなたが言うような「2D」組織であり、ファイルがたくさんあります（たとえば、プリプロセッサが少ないcssを話しているとしましょう）

スタイリングしている要素の同じ「less」ファイルでメディアクエリを使用する方が簡単であることがわかりました。

たとえば、header.lessがあり、同じファイルにそのメディアクエリがあります。

#header {
    ...
}

//Header media queries
-----------------------

@media screen and (min-width:480px) { ... }
@media screen and (min-width:768px) { ... }

さて、なぜ私はそれをそのようにすることを選ぶのですか？->（私にとって）別のファイル（たとえば、response.lessなど）を調べなければならないのは非常に苦痛なので、メディアクエリでヘッダーを検索し、変更を加えます。このメソッドを使用すると、メディアクエリがどこにあるかを常に把握しており、要素ごとに簡単にアクセス/変更できます。これにより、コードにさらに多くの行が追加されることはありません。

それに関する唯一の問題は、cssが生成されるときに、cssコード全体に広がる単一要素のメディアクエリになってしまうことです。あまり美しくない！（現時点では、less / winlessはメディアクエリを自動的にグループ化しません。）

メディアクエリをグループ化するための小さなアプリの作成を終了しました。http：//nokturnalapp.com/mqhelper/ これを使用して本番用のcssファイルを作成します。（まだ完了していません。メディアクエリバージョンから削除されたコードを追加する必要がありますが、それを確認してください。）

これが何らかの形でお役に立てば幸いです。

于 2012-10-10T15:51:44.380 に答える