この記事では、私は典型的なプロジェクトでのスタイルの組織の例を与えます。
ちょっとした紹介で、問題の関連性となぜそれが必要なのかを説明しようと思います。
この状況を考慮してください。 開発者は、サイトに次の機能を実装する必要があります。 これには、新しいセクション、ブロック、要素の追加が含まれます。 開発者は多くの場合、他の人のコードを信頼せず、レイアウトに到達すると、main.cssのような名前のcssファイルを見つけて、新しいスタイルを最後に追加します。
時間が経つと、新しい開発者がやって来て、同じようなタスクを与えられます。スタイルを理解しようとすると、そこにパターンがないことがわかり、前のパターンと同じことを繰り返します。
管理者は期限を設定し、ますます多くの新しい機能が開発され、プロジェクトは成長しています。 その結果、CSSファイルはゴミ箱に変わり、サイトの読み込み時間が長くなり、より多くの欠陥が表示されます。
これは多くの人によく知られていると思います。
次に、スタイルの構造化について直接話しましょう。
1つのファイルにすべてのスタイルを保持するのは無理です;時間の経過とともに、ファイル内を移動することは非常に困難になります。 さらに、各ページはこのファイルのルールの約10％を使用し、非常に重くなります。
サイトの論理ブロックごとにスタイルを分けるのがはるかに最適です。
プロジェクトとしてのCSS（LESS、SASS、SCSS）で動作するようにライブラリを接続する必要があります。 変数、関数を扱う必要があります。
サーバー要求を減らすには、ファイルのアセンブリが必要です。 -ファイルは特別な設計に接着されている必要があり、それは例えば、標準的な設計は、CSS提供しています使用することが可能である
import文を 。 ここで、選択したcssライブラリのソースコードを編集するには、開発者の助けが必要な場合があります。
さらに、ファイルの量を減らすために、あなたは圧縮されたクライアントに来る必要があります。 たとえば、
dotLessは 、
web.configの値
<dotless minifyCss=" true " cache="false"/>でファイルを圧縮します。
各論理ブロックには、個別のcssファイルがあります。 これにより、サポート、目的のスタイルの検索、そして実際にファイルの向きが簡素化されます。 これらのファイルはすべてソースです。/css/sources/フォルダーに格納します。 CSS-ファイルの残りの部分 - コレクター、彼らはページへのリンクがあり、輸入先を収集します。
問題のプロジェクトが特定のソーシャルネットワークであると仮定すると、これに基づいて、次の構造を区別できます。
/ css
/ sources-
リソースのフォルダーはサーバー上に配置されていません/ global-vars-
このフォルダーのファイルは、必要に応じて各cssファイルコレクターに含ま
れますlocals.css-
グローバル変数functions.css-
グローバル関数/共通
reset.css-
説明する必要はないと思います。どのような
スタイルかは
明確ですutils.css-
タイプ.clearfixのスタイル/コンテンツ
base.css-
コンテンツのメインスタイル、つまりh1-h6、p、リストの箇条書き（ul.text、ul.dashedなど）、dl、dd、dt、テキスト内の画像およびパネル（テキストラップ） ）、テキスト列などpanels.css-
さまざまなパネルtables.css
-コンテンツのテーブルのスタイル（目、cherezpolositsa）/コントロール
buttons.css-
ボタンの種類forms.css-
入力フィールドの一般的なスタイル（内部シャドウ、フォーカス（フレーム）、検証メッセージの書式設定、デフォルトで非表示にするなど）tabs.css-
タブ、タブsystem-notifications.css-
原則として、システムメッセージには、成功（緑）、失敗（赤）、情報（灰色、青）の3つのタイプがあります。pager.css-
ページャーbanners.css-
サイト上のバナーballoons.css-
あらゆる種類のバルーン、ツールチップ、カスタムツールなど/メンバー
thumb.css-
ユーザーアバターcard.css-
ユーザーカード（アバター、名前、簡単なデータ）cards-list.css-
例えば、カードのあるグリッドprofile.css-
ユーザープロフィール/モジュール
-サイトへのさまざまなモジュールsearch.css
ニュースlist.css
gifts.css
games.css
/ない-AUTH
-権限のないユーザーにlogin.css-
ログインフォームregistration.css-登録
フォーム/ auth-
許可ユーザー向け私-account.css
mail-system.css-
受信トレイメッセージ、送信トレイなどauth-menu.css-
承認済みゾーンのナビゲーションメニューmy-profile.css-
プロフィールの表示、編集/レイアウト
common.css
header.css
トップmenu.css
footer.css
overlay.css-
たとえば、レイヤーの上のすべてのポップアップは0.5に暗くなりますmain.css-
すべてのマスターページにリンクされたメインコレクター/レイアウト
default.css-
サイトのメインレイアウト、/ layoutsフォルダーからファイルを収集し、メインレイアウトでウィザードに接続しますポップアップwindows.css
- popup'ovのスタイルをポップアップウィンドウのためのマスターページに接続されていますnot-auth.css-
/ sources / not-auth /フォルダーからスタイルを収集しますauth.css
-フォルダ/ソース/認証/のスタイルを収集/テーマ
-さまざまなサイトテーマ新year.css
st-valentine.css
/％section-name％
-サイトの新しいセクション、「サイト内のサイト」、独自のサブメニューの存在などによって特徴付けられます。/ css
％セクション名％.css
layout.css
/ソース
menu.css
もちろん、各プロジェクトには独自の構造があります。 ファイル共有の原則は重要です。
一部のファイルの追加説明：
main.cssは -フォルダからファイルを収集します。
/ソース/ global-vars
/ソース/共通
/ソース/コンテンツ
/ソース/コントロール
/ソース/メンバー
/ソース/モジュール
functions.css -などのグローバル関数を、含まれています。
.rounded-corners （ @radius）
{
border-radius ： @radius;
-mozボーダー半径：@radius。
-webkit-border-radius ： @radius;
*動作： url （ /libs/progressive-IE.htc ） ;
}
sources / layouts / common.css-レイアウトによるグローバルスタイル：
.columns-wrapper
{
表示 ：テーブル;
*ズーム： 1 ;
}
.columns-wrapper .column
{
表示 ： テーブルセル ;
* float ： 左 ;
}
not-auth.css ファイルと
auth.cssファイルの接続は、ユーザーの承認ステータスによって異なります。 例えば、asp.netでそれは次のようになります。
< asp:LoginView runat ="server" >
< AnonymousTemplate >
< link href ="/css/not-auth.css" rel ="stylesheet" type ="text/css" />
</ AnonymousTemplate >
< LoggedInTemplate >
< link href ="/css/auth.css" rel ="stylesheet" type ="text/css" />
</ LoggedInTemplate >
</ asp:LoginView >
* This source code was highlighted with Source Code Highlighter .
持てばいいと思うコンセプトを伝えたい。
CSSクラス - 新しいページは「レンガ»の構成要素から構築する必要があります。 この概念を誤解して、
mar-bottom-15 、
float-left 、
pad-20などのクラスからページを作成する人もいますが、これも大きな間違いです。
サイト全体にわたって均一なスタイル要素を保つ必要があり、すなわち あるページの見出しh1は、別のページの見出しh1と同じように見えるはずです。 見出し、段落、リスト、パネル、タブ、ポケットベル、コンテンツテーブルなど デザインは単一のスタイルに準拠する必要があります。
新しいページのスタイルを記述する前に、プロジェクトの既存のcssファイルを分析する必要があります。おそらく、すでに必要なスタイルが存在している可能性があります。 cssファイルが不必要に大きくなることはありません。
結論として、私はJSのためにそれが上記のすべてのように真のだと思います。