管理CSS爆発

https://stackoverflow.com/questions/2253110

20-09-2019
|

質問

私に大きく依存しCSSのためのウェブサイトしました。現在、すべてのCSSスタイルが適用されているたタグには、どうやったらうことにより移動させることができますの外部スタイリングをお手伝いできる将来変わります。

この問題は、見ろ"CSS爆発".身につけてください私にとっての決定のあり方について整理し、抽象データ内のCSSファイルです。

を使用している多数の div タグウェブサイト内の移動から大きく表に基づく。うになっていくのでCSSセレクタに見えるようになります:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

でもだしているので、初心者破壊も修復もおもしろくな提言ができるかについての様々な部品のCSSファイルです。いては別にCSS属性のための全ての要素が自分のページをずっといったCSSファイルにかなり直感的で簡単に読み出します。

私の研究の究極的な目標は、"としてお使いいただけるように、CSSファイルを発揮できる力を高速化することができますこのように、その他の個人がこのサイトには将来のものが使われた良いコーディングを行えるものと思います。

解決

これはとても良い質問です。どこを見ても、CSS ファイルはしばらくすると制御不能になる傾向があります。特に、チームで作業している場合はこれに限られません。

以下は私自身が守ろうとしているルールです（常に守れているわけではありません）。

リファクタリングは早めに、頻繁に行ってください。 CSS ファイルを頻繁にクリーンアップし、同じクラスの複数の定義を結合します。古い定義を削除する すぐに.
バグ修正中に CSS を追加する場合は、変更内容についてコメントを残してください (「これは、IE < 7 でボックスが左揃えになるようにするためです」)
冗長性を避けてください。同じものを定義すると、 .classname そして .classname:hover.
コメントを使用する /** Head **/ 明確な構造を構築します。
一定のスタイルを維持するのに役立つ整形ツールを使用します。私が使う ポリスタイル, 、とても満足しています（15ドルかかりますが、お金は有効に使っています）。無料のものもあると思います（更新:たとえば コードビューティファイアー に基づく CSS 整頓, 、私自身はまだ使用したことがないオープンソースツールですが、とても面白そうです。)
賢明なクラスを構築します。これに関するいくつかの注意事項については、以下を参照してください。
セマンティクスを使用し、DIV スープを避ける - 使用する <ul>たとえば、メニューの場合。
すべてをできるだけ低いレベルで定義します (例:デフォルトのフォントファミリー、色、サイズ body) を使用してください inherit 可能であれば
非常に複雑な CSS を使用している場合は、CSS プリコンパイラーが役立つ可能性があります。調べてみる予定です xCSS 全く同じ理由ですぐに。周りには他にも何人かいます。
チームで作業する場合は、CSS ファイルの品質と標準の必要性も強調します。誰もが自分のプログラミング言語のコーディング標準を重視していますが、これが CSS にも必要であるという認識はほとんどありません。
チームで仕事をする場合は、するバージョン管理の使用を検討してください。これにより、物事の追跡がはるかに簡単になり、編集の競合も解決しやすくなります。たとえ HTML と CSS に「興味があるだけ」であっても、本当に価値があります。
一緒に作業しないでください !important. 。IE =< 7 がそれに対処できないからだけではありません。複雑な構造では、! important を使用すると、ソースが見つからない動作を変更したくなることがよくありますが、毒長期的なメンテナンスに。

賢明なクラスの構築

これが私が賢明なクラスを構築する方法です。

最初にグローバル設定を適用します。

body { font-family: .... font-size ... color ... }
a { text-decoration: none; }

次に、ページのレイアウトの主要なセクションを特定します。上部領域、メニュー、コンテンツ、およびフッター。 適切なマークアップを記述した場合、これらの領域は HTML 構造と同一になります。

次に、CSS クラスの構築を開始し、できるだけ多くの適切な祖先を指定し、関連するクラスをできるだけ密接にグループ化します。

div.content ul.table_of_contents 
div.content ul.table_of_contents li 
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber

CSS 構造全体を次のように考えてください。木ルートから離れるほど、定義がより具体的になります。クラスの数をできるだけ少なくし、同じことを繰り返すことはできるだけ少なくしたいと考えています。

たとえば、3 レベルのナビゲーションメニューがあるとします。これら 3 つのメニューは見た目は異なりますが、いくつかの共通点もあります。たとえば、それらはすべて <ul>, 、それらはすべて同じフォントサイズを持ち、項目はすべて互いに隣り合っています (デフォルトのレンダリングとは対照的に)。 ul）。また、どのメニューにも箇条書きはありません (list-style-type).

まず、一般特性を名前付きクラスに追加 menu:

div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }

次に、3 つのメニューそれぞれの具体的な特性を定義します。レベル 1 の高さは 40 ピクセルです。レベル 2 および 3 は 20 ピクセル。

注記： これには複数のクラスを使用することもできますが、Internet Explorer 6 は使用できません。 複数のクラスに問題がある, したがって、この例では次を使用します ids.

div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }

メニューのマークアップは次のようになります。

<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>

これら 3 つのメニューのように、意味的に類似した要素がページ上にある場合は、まず共通点を見つけ出し、それらをクラスに入れるようにしてください。次に、特定のプロパティを計算してクラスに適用するか、Internet Explorer 6 をサポートする必要がある場合は ID に適用します。

その他の HTML のヒント

これらのセマンティクスを HTML 出力に追加すると、デザイナーは後から純粋な CSS を使用して Web サイトやアプリの外観をカスタマイズできるため、大きな利点と時間を節約できます。

可能であれば、すべてのページの本文に一意のクラスを与えます。 <body class='contactpage'> これにより、スタイルシートにページ固有の調整を非常に簡単に追加できます。
```
body.contactpage div.container ul.mainmenu li { color: green }
```
メニューを自動的に作成する場合は、後で広範なスタイルを設定できるように、できるだけ多くの CSS コンテキストを追加します。例えば：
```
<ul class="mainmenu">
 <li class="item_first item_active item_1"> First item </li> 
 <li class="item_2"> Second item </li> 
 <li class="item_3"> Third item </li> 
 <li class="item_last item_4"> Fourth item </li> 
</ul>
```
このようにして、すべてのメニュー項目にアクセスして、セマンティックコンテキストに従ってスタイルを設定できます。それがリストの最初の項目であるか最後の項目であるか。現在アクティブなアイテムかどうか。そして番号によって。

注記上の例で概説したように、この複数のクラスの割り当ては IE6では正常に動作しません. 。があります 回避策 IE6 が複数のクラスを処理できるようにするため。私はまだ試していませんが、ディーン・エドワーズ氏の言葉によると、非常に有望そうです。それまでは、最も重要なクラス (項目番号、アクティブまたは最初/最後) を設定するか、ID を使用する必要があります。(IE6 ブー！)

他のヒント

以下に 4 つの例を示します。

4つすべてについて、私の答えには、ナタリー・ダウンのPDFをダウンロードして読むようにというアドバイスが含まれていました。 CSS システム. 。(PDF にはスライドにはないメモがたくさん含まれているので、PDF を読んでください!)。組織化に関する彼女の提案に注目してください。

編集 (2014/02/05) 4年後、私はこう言うでしょう。

CSS プリプロセッサを使用する ファイルを部分ファイルとして管理します (個人的には Sass と Compass を好みますが、Less も非常に優れており、他にもあります)
などの概念について読んでください。 OOCSS, SMACSS, 、そしてベムまたはゲテベム.
CSS フレームワークがどのように人気があるかを見てみましょう。ブートストラップそしてザーブ財団構造化されています。また、あまり人気のないフレームワークを軽視しないでください。イヌイットは興味深いものですが、他にもたくさんあります。
継続的統合サーバーや Grunt や Gulp などのタスクランナー上のビルドステップとファイルを結合/縮小します。

CSSで見出しを書かない

セクションをファイルに分割するだけです。CSS コメントはすべてコメントである必要があります。

reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css

スクリプトを使用してそれらを 1 つに結合します。必要であれば。優れたディレクトリ構造を用意して、スクリプトを再帰的にスキャンするだけで済みます。 .css ファイル。

見出しを記述する必要がある場合は、ファイルの先頭に目次を付けます。

目次の見出しは、後で作成する見出しと完全に同じである必要があります。見出しを探すのは面倒です。さらに問題に加えて、最初のヘッダーの後に別のヘッダーがあることをどうやって知ることができるのでしょうか?ps。目次を作成するときに、各行の先頭にドキュメントのような * (スター) を追加しないでください。テキストを選択するのが面倒になるだけです。

/* Table of Contents
   - - - - - - - - -
   Header stuff
   Body Stuff
   Some other junk
   - - - - - - - - -
 */
...
/* Header Stuff 
 */
...
/* Body Stuff 
 */

コメントはブロックの外ではなく、ルール内またはルール内に書いてください。

まず、スクリプトを編集するときに、ルールブロックの外側にあるものに注意を払う可能性は 50/50 です (特に、それが大きなテキストの塊の場合 ;))。次に、外部で「コメント」が必要になるケースは（ほとんど）ありません。外側にある場合は、99% の確率でタイトルなので、そのままにしておきます。

ページをコンポーネントに分割する

コンポーネントには次のものが必要です position:relative, 、いいえ padding そしていいえ margin, 、ほとんどの時間。これにより、% ルールが大幅に簡素化されるだけでなく、より単純なルールも可能になります。 absolute:position要素の 'ing。絶対位置のコンテナがある場合、絶対位置の要素は計算時にそのコンテナを使用します。 top, right, bottom, left プロパティ。

HTML5 ドキュメント内のほとんどの DIV は通常、コンポーネントです。

コンポーネントは、ページ上の独立した単位とみなせるものでもあります。平たく言えば、何かをコンポーネントのように扱うのが理にかなっている場合、何かをコンポーネントのように扱います。 ブラックボックス.

もう一度 QA ページの例を見てみましょう。

#navigation
#question
#answers
#answers .answer
etc.

ページをコンポーネントに分割すると、作業を管理可能な単位に分割できます。

累積効果のあるルールを同じ行に配置します。

例えば border, margin そして padding （だがしかし outline）すべて、スタイルを設定している要素の寸法とサイズに追加されます。

position: absolute; top: 10px; right: 10px;

1 行では読みにくい場合は、少なくとも近くに配置してください。

padding: 10px; margin: 20px;
border: 1px solid black;

可能な場合は省略表現を使用してください。

/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;

セレクターを繰り返さない

同じセレクターのインスタンスがさらに多くある場合、同じルールのインスタンスが複数存在することは避けられない可能性が高くなります。例えば：

#some .selector {
    margin: 0;
    font-size: 11px;
}
...
#some .selector {
    border: 1px solid #000;
    margin: 0;
}

ID/クラスを使用できる場合は、TAG をセレクターとして使用しないでください。

まず、DIV タグと SPAN タグは例外です。絶対に使用しないでください。;) クラス/ID を付加するためにのみ使用してください。

これ...

div#answers div.answer table.statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
    outline: 3px solid #000;
}

次のように書く必要があります:

#answers .answer .statistics {
    border-collapse: collapsed;
    color: pink;
    border: 1px solid #000;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

余分なダングリング DIV はセレクターに何も追加しないためです。また、不必要なタグルールも強制されます。たとえば、あなたが変わるとしたら、 .answer から div に article あなたのスタイルは崩れてしまうでしょう。

または、より明確にしたい場合は、次のようにします。

#answers .answer .statistics {
    color: pink;
    border: 1px solid #000;
}
#answers .answer table.statistics {
    border-collapse: collapsed;
}
#answers .answer .statistics thead {
    outline: 3px solid #000;
}

その理由は、 border-collapse プロパティは、に適用された場合にのみ意味をなす特別なプロパティです。 table. 。もし .statistics ではありません table それは当てはまらないはずです。

一般的なルールは悪です！

可能であれば、汎用/マジックルールの作成を避けてください
CSS のリセット/リセット解除の場合を除き、すべての汎用マジックは少なくとも 1 つのルートコンポーネントに適用する必要があります。

それらは時間を節約するものではなく、頭を爆発させるものです。メンテナンスも悪夢のようなものになります。ルールを作成するときに、ルールがどこに適用されるかはわかっているかもしれませんが、ルールが後で問題にならないという保証はありません。

この一般的なルールに追加すると、スタイルを設定しているドキュメントについてある程度の知識がある場合でも、混乱し、読みにくくなります。これは、汎用ルールを作成するべきではないということではありません。汎用ルールにする意図がない限り、汎用ルールを使用しないでください。また、汎用ルールであっても、可能な限り多くのスコープ情報をセレクターに追加します。

このようなもの...

.badges {
    width: 100%;
    white-space: nowrap;
}

address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

...プログラミング言語でグローバル変数を使用する場合と同じ問題があります。彼らに範囲を与える必要があります。

#question .userinfo .badges {
    width: 100%;
    white-space: nowrap;
}

#answers .answer .userinfo address {
    padding: 5px 10px;
    border: 1px solid #ccc;
}

基本的には次のようになります:

components                   target
---------------------------- --------
#answers .answer   .userinfo address
-------- --------- --------- --------
domain   component component selector

私は、コンポーネントがページ上のシングルトンであることがわかっているときは常に ID を使用することを好みます。あなたのニーズは異なるかもしれません。

注記：理想的には、十分な量を書く必要があります。ただし、セレクター内でより多くのコンポーネントについて言及することは、より少ないコンポーネントについて言及する場合と比較して、より許容される間違いです。

あなたが持っていると仮定しましょう pagination 成分。サイト内のさまざまな場所で使用します。これは、一般的なルールを作成する場合の良い例です。あなただとしましょう display:block 個々のページ番号がリンクされ、背景が濃い灰色になります。それらを表示するには、次のようなルールが必要です。

.pagination .pagelist a {
    color: #fff;
}

ここで、回答のリストにページネーションを使用すると、次のような事態に遭遇する可能性があります。

#answers .header a {
    color: #000;
}
...
.pagination .pagelist a {
    color: #fff;
}

これにより、白いリンクが黒くなりますが、これは望ましくありません。

間違った修正方法は次のとおりです。

.pagination .pagelist a {
    color: #fff !important;
}

それを修正する正しい方法は次のとおりです。

#answers .header .pagination .pagelist a {
    color: #fff;
}

複雑な「ロジック」コメントは機能しません:)

次のように書くと:「この値は、なんとか高さとなんとかの組み合わせに依存します。」間違いを犯すのは避けられず、すべてが砂上の楼閣のように崩れ落ちます。

コメントはシンプルにしてください。「論理操作」が必要な場合は、次のような CSS テンプレート言語のいずれかを検討してください。サスまたは少ない.

カラーパレットはどうやって書くのですか？

これは最後まで残してください。カラーパレット全体のファイルを用意します。このファイルがなくても、スタイルのルールには使用可能なカラーパレットが含まれているはずです。カラーパレットが上書きされるはずです。非常に高いレベルの親コンポーネント (例: #page) そして、スタイルを自己完結型ルールブロックとして記述します。色だけでも、それ以上のものでも構いません。

例えば。

#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
    color: #222; background: #fff; 
    border-radius: 10px;
    padding: 1em;
}

考え方は簡単です。カラーパレットは、基本スタイルから独立したスタイルシートです。 カスケード の中へ。

名前が減り、必要なメモリが少なくなり、コードが読みやすくなります。

使用する名前の数は少ない方が良いです。理想的には、非常に単純な (そして短い!) 単語を使用します。テキスト、本文、ヘッダー。

また、長い「適切な」単語を用意するよりも、単純な単語を組み合わせる方が理解しやすいと思います。ポストボディ、ポストヘッド、ユーザー情報など。

こうすることで、あなたのスタイルスープを読みに来た見知らぬ人 (数週間後のあなたのように ;)) が来たとしても、すべてのセレクターがどこで使われているかではなく、単語がどこで使われているかを理解するだけで済みます。たとえば、私が使用するのは .this 要素が「選択された項目」または「現在の項目」などであると思われる場合は常に。

後は掃除してください

CSS を書くのは食事のようなもので、時には混乱を残すこともあります。混乱したコードを必ずクリーンアップしてください。そうしないと、ゴミコードが山積みになるだけです。使用しないクラス/ID を削除します。使用しない CSS ルールを削除します。すべてがしっかりしていて、競合したルールや重複したルールがないことを確認してください。

私が提案したように、スタイル内で一部のコンテナーをブラックボックス (コンポーネント) として扱い、それらのコンポーネントをセレクターで使用し、すべてを 1 つの専用ファイルに保持している (または、TOC とヘッダーを含むファイルを適切に分割している) 場合、仕事が大幅に楽になります...

Firefox 拡張機能 Dust-Me Selectors などのツールを使用できます (ヒント:これを sitemap.xml に指定すると、CSS 核やカーニーに隠されたジャンクを見つけるのに役立ちます。

保管してください `unsorted.css` ファイル

QA サイトのスタイルを設定していて、「回答ページ」のスタイルシートがすでにあるとします。これを「回答ページ」と呼びます。 answers.css. 。新しい CSS を多数追加する必要がある場合は、 unsorted.css スタイルシートをリファクタリングして、 answers.css スタイルシート。

これにはいくつかの理由があります:

完了後にリファクタリングを行った方が早いです。その後、ルール (おそらく存在しない) を検索してコードを挿入します。
削除するものを作成することになりますが、コードを挿入すると、そのコードを削除するのが難しくなるだけです
元のファイルに追加すると、ルール/セレクターの重複が容易に発生します

を見てください 1. SASSする 2. コンパスの

最良の方法などの見へのカウンター CSS 膨張するオブジェクト指向CSS原理です。

な OOCSS の枠組みであると良いと思います。

一部のイデオロギーだけが先走ると、自らの行動を多くのだといわれているのはこの答えはまさしくその通りなのだから建築家 CSS オブジェクト指向ファッションまでを実際に仕事をコードリーン&セットを作ります。

キーもここでは定通りにオブジェクトまたはブロックパターンサイトや建築家とします。

Facebook雇用の創OOCSS, ニコール-サリバンくのにおける節減をトータルフロント終了コード(HTML/CSS).ありますので、実際には貯蓄ないだけにCSS、HTMLによるものであるので、できるだろに変換する table に基づくレイアウトには多くの div's

もアプローチに入ることになりますが、一部の側面にOOCSS、プランとお書きの上、CSSする拡張モジュールからスタートします。ジョナサン-ア大きな課題に直面して輝かしい書や書籍約 SMACSS-拡張性とモジュラー建築のためのCSS

ようフックのあらリンク:
5つの間違いは大量のCSS(ビデオ)
5つの間違いは大量のCSS(スライド）
CSS膨張-(スライド）

また、カスケード、および体重、およびそれらがどのように動作するを理解する必要があります。

私はあなただけのクラス識別子（div.title）を使用しているに気づきます。あなたは、同様のIDを使用することができることを知って、そしてIDがクラスよりも多くの重量を運ぶことにしましたか？

たとえば、

#page1 div.title, #page1 ul, #page1 span {
  // rules
}

これらすべての要素は、フォントサイズ、たとえば、色、または任意のあなたのルールがあるの共有になります。あなたも、＃1ページ1の子孫であるすべてのdiv要素は、一定のルールを取得することができます。

重量に関しては、CSS軸が重い/ /最も一般的なものから最軽量に最も固有移動することを覚えておいてください。クラス指定がID指定子によって却下されたことにより、つまり、CSSセレクタに要素指定子は却下されます。数字がカウントので、2つの要素指定子（ULのリチウム）を有するセレクタは、単一の指定子（LI）とつ以上の重量を有するであろう。

の数字のように考えてください。もの列の9はまだ十列の1未満です。 ID指定子とセレクタ、クラス指定、および2つの要素指定子は、ID、500クラス指定1,000素子指定子ないとセレクタ以上の重量を有するであろう。これはもちろん、不合理一例ですが、あなたのアイデアを得ます。ポイントは、この概念を適用すると、あなたはCSSの多くをクリーンアップすることができますされます。

あなたは、クラス=「タイトル」を持っている他の要素との競合に実行されていない限り、

ところで、クラス（div.title）に要素指定子を追加する必要はありません。後でその重みを使用する必要があるかもしれないので、不必要な重量を追加しないでください。

は、私がする

レスCSSの動的なフレームワークを提案することができます先に述べたように、

これは、SASSに似ています。

これは、親クラスごとにCSSを維持するのに役立ちます。

例えばます。

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

これは何：幅が適用されます。＃のchild1のと＃1 child2の両方に100％

また、＃は、特定のCSSが#parentに属しCHILD1ます。

これは

にレンダリングします

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

難しいのは、サイトに必要なデザインを一連のルールに変換することだと思います。サイトのデザインが明確でルールに基づいている場合、クラス名と CSS 構造はそこから流れることができます。しかし、時間の経過とともに、あまり意味のない部分をサイトにランダムに追加するようになった場合、CSS でそれに対してできることはあまりありません。

私は CSS ファイルを大まかに次のように整理することが多いです。

CSS リセット、に基づくエリック・マイヤーの. 。(そうしないと、ほとんどの要素について、デフォルトのブラウザースタイルをリセットするだけのルールが少なくとも 1 つまたは 2 つあることがわかります。たとえば、私のリストのほとんどは、リストのデフォルトの HTML スタイルのように見えません。)
グリッドシステム CSS (サイトで必要な場合)。(私のベースは 960.gs)
すべてのページに表示されるコンポーネントのスタイル (ヘッダー、フッターなど)
サイト内のさまざまな場所で使用されるコンポーネントのスタイル
個々のページにのみ関連するスタイル

ご覧のとおり、そのほとんどはサイトのデザインに依存します。デザインが明確で整理されていれば、CSS も整理できます。そうでなければ、あなたはめちゃくちゃです。

私の答えは、あなたの質問で提起された高レベルの懸念に対処するための高レベルのものです。より美しくするために実行できる低レベルの組織上のトリックや微調整はあるかもしれませんが、それらはいずれも方法論的な欠陥を修正することはできません。CSS エクスプロージョンに影響を与えるものがいくつかあります。サイト全体の複雑さはもちろんですが、命名セマンティクス、CSS パフォーマンス、CSS ファイル構成、テスト容易性/受け入れ可能性なども重要です。

命名セマンティクスに関しては正しい道を進んでいるように見えますが、さらに一歩進めることができます。構造を変更せずにサイト上で繰り返し表示される HTML のセクション (「モジュール」と呼ばれる) はセレクタールートと見なすことができ、そこからそのルートを基準にして内部レイアウトの範囲を指定できます。これが基本的な教義です オブジェクト指向CSS, 、そして、次のことができます詳細については、Yahoo エンジニアによるこの講演をご覧ください。.

このクリーンなアプローチは、パフォーマンスへの懸念とは逆に作用する可能性があることに注意することが重要です。 ID またはタグ名のいずれかに基づく短いセレクター. 。そのバランスを見つけるのはあなた次第ですが、大規模なサイトを持っていない限り、これはセレクターを短くするよう頭の片隅に置いておくだけのガイドです。パフォーマンスについて詳しくはこちら.

最後に、いただきますか？ 単一の CSS ファイル サイト全体用ですか、それとも複数のファイル用ですか (ページごとまたはセクションファイルと一緒に使用される単一のベースファイル)。単一ファイルの方がパフォーマンスには優れていますが、複数のチームメンバーがいると理解や保守が難しくなり、テストが難しくなる可能性があります。テスト用に、 単一の CSS テストページ これには、衝突や意図しないカスケードをテストするためにサポートされているすべての CSS モジュールが含まれています。

あるいは、 複数ファイルのアプローチ, 、CSS ルールの範囲をページまたはセクションに設定します。これにはブラウザが複数のファイルをダウンロードする必要があり、パフォーマンスの問題になります。サーバー側プログラミングを使用して、CSS ファイルを動的に指定し、単一のファイルに集約 (および縮小) することができます。ただし、これらのファイルは別個であり、それらのテストも別個に行われるため、ページ/セクション間で外観と操作性が一貫しない可能性があります。したがって、テストはさらに困難になります。

顧客の具体的なニーズを分析し、それに応じてこれらの懸念事項のバランスを取るのはあなた次第です。

私の前でこう言ったように：OOCSS にアクセスします。Sass/Less/Compass は使いたくなりますが、バニラ CSS が正しい方法で使用されるまでは、Sass/Less/Compass は状況を悪化させるだけです。

まず、効率的な CSS について読んでください。Google Page Speed を試して、効率的な CSS について Souders が書いたものを読んでください。

次に、OOCSS を入力します。

カスケードの操作方法を学びます。(結局のところ、私たちはそれをそう呼んでいます) カスケード スタイルシート)。
粒度を適切に設定する方法を学びます (トップダウンではなくボトムアップ)。
構造とスキンを分離する方法を学びます (何がユニークで、これらのオブジェクトのバリエーションは何ですか?)
コンテナとコンテンツを分離する方法を学びます。
グリッドを愛することを学びましょう。

CSS の記述に関するあらゆる面で革命を起こすでしょう。完全に新しくなって、とても気に入っています。

アップデート：SMACSS は OOCSS に似ていますが、一般的に適応しやすいです。

賢明な CSS の核となる原則を以下から抜粋 CSS リファクタリング:追加専用からモジュラー CSS へ

SASSで書き込みます。 変数やミックスインなどの利点を無視するのは正気の沙汰ではありません。

スタイル設定に HTML ID を使用しないでください。常にクラスを使用する. 。HTML ID は、正しく使用すると、ページ全体に 1 回だけ表示されます。再利用性とは正反対で、最も基本的な商品の1つです。賢明なエンジニアリング。さらに、セレクタをオーバーライドするのは本当に難しいです 1つのHTML IDを圧倒する唯一の方法は、多くの場合、別の ID を作成し、ID をコードベースに伝播させます。彼らは害虫です。変更しないJavascriptのHTML IDを残す方が良いまたは統合テストフック。

CSS クラスには、アプリケーション固有の機能ではなく、視覚的な機能に基づいて名前を付けます。 たとえば、".highlight-box" と言います。 ".bundle-product-discount-box" の代わりに。この方法でコーディングすると、ロールアウト時に既存のスタイルシートを再利用できることサイドビジネス。例えば、法律書の販売から始めましたが、最近、法律の家庭教師に引っ越しました。以前の CSS クラスには、「.download_document_box」は、話すときに意味をなすクラス名ですデジタルドキュメントについてですが、新しいドキュメントに適用すると混乱するだけです家庭教師のドメイン。既存の両方に合うより良い名前サービス、そして将来のサービスは「.pretty_callout_box」になります。

特定のグリッド情報に基づいて CSS クラスに名前を付けることは避けてください。 CSSコミュニティには恐ろしいアンチパターンがありました(そして今もそうです)。 CSS フレームワークのデザイナーと作成者 (cough ツイッターブートストラップ) 「span-2」または「cols-8」がCSSの妥当な名前であると信じていますクラス。CSSのポイントは、変更の可能性を提供することですマークアップに(あまり)影響を与えずにデザインします。グリッドのハードコーディングサイズをHTMLに組み込むと、この目標が阻止されるため、プロジェクトは週末よりも長く続くと予想されます。回避方法の詳細グリッドクラスは後で。

CSS をファイル間で分割する. 。理想的には、すべてを「コンポーネント」/「ウィジェット」に分割し、これらのアトムからページを作成します。設計。しかし、現実的には、あなたのウェブサイトの一部がページには特異性があります(例:特別なレイアウト、または奇妙な写真ギャラリーは 1 つの記事にのみ表示されます)。このような場合は、その特定のページに関連するファイルを作成し、リファクタリングのみで本格的なウィジェットは、要素が他の場所で再利用されます。これはトレードオフであり、次の動機があります。実際的な予算上の懸念。

ネストを最小限に抑えます。 セレクターをネストする代わりに新しいクラスを導入します。SASSはセレクタを繰り返す手間を省きます入れ子になるということは、5 レベルの深さまで入れ子にしなければならないという意味ではありません。セレクターを過剰に修飾しないでください (例:".nav" の代わりに "ul.nav" を使用しないでください。同じ仕事ができます。また、HTML 要素をカスタムクラス名(例:"h2.highlight")。代わりに、クラス名前だけを指定して、ベースセレクタ(例:前の例 ".highlight")にする必要があります。セレクターを過剰に修飾しても、追加されません価値。

HTML 要素のスタイルを作成します (例:"h1") は、アプリケーション全体で一貫している必要がある基本コンポーネントをスタイル設定する場合にのみ使用します。 "header ul" のような広範なセレクタは避けてください。いずれにせよ、いくつかの場所でそれらをオーバーライドする必要があります。私たちが言い続けているように、ほとんどの特定の適切な名前のクラスを使用するときはいつでも、特定のスタイルが欲しい。

Block-Element-Modifier の基本を理解してください。 たとえば、ここでそれについて読むことができます。私たちはそれをかなり軽く使用しましたが、それでも役に立ちました CSSスタイルの整理にたくさん参加しています。

多くの時間は、私はセクション間の見出しコメントで、個人がセクションにファイルを抜け出す表示されます。

のようなもの。

/* Headings and General Text */

.... stuff here for H1, etc..

/* Main page layout */

.... stuff here for layout page setup etc.

これは非常にうまく機能し、後で戻って、あなたが作業しているものを見つけることが簡単に作ることができます。

見るべきですベム.

理論

BEM は、CSS セレクターを編成して名前を付けるための一連の手順を提供する試みで、物事をより再利用可能かつモジュール化して、スパゲッティコードや特異性の問題につながることが多いセレクター間の衝突を回避することを目的としています。

正しく使用すると、実際に非常に良い効果が得られます。

スタイルは要素に追加されると期待どおりの動作をします
スタイルは漏洩せず、追加されたものにのみ影響します。
スタイルはドキュメント構造から完全に切り離されています
スタイルは相互に強制的にオーバーライドする必要はありません

BEM は SASS とうまく連携して、ほぼオブジェクト指向のスタイルを CSS にもたらします。単一の UI 要素の表示を処理し、色や内部要素の処理方法などの「メソッド」などの変数を含むモジュールファイルを構築できます。筋金入りの OO プログラマーはこのアイデアに躊躇するかもしれませんが、実際には、応用概念は、モジュール性、疎結合、緊密な結合、コンテキストフリーの再利用性など、OO 構造の優れた部分の多くを取り入れています。次を使用すると、カプセル化されたオブジェクトのように見える方法で構築することもできます。サスと & オペラトr.

Smashing Magazine のより詳細な記事は次のとおりです。ここで見つかりました;もう 1 つは CCS Wizardry の Harry Roberts によるものです (CSS に関わる人なら誰でも読んでおくべき人物です) ここにある.

実際には

私はこれを何度か使用しており、SMACSS と OOCSS も使用したことがあります。つまり、それらを比較するものもあります。私はまた、経験の浅い私自身の創作による大きな混乱にも取り組んできました。

現実世界で BEM を使用するときは、いくつかの追加の原則でテクニックを強化します。私はユーティリティクラスを利用しています - 良い例はラッパークラスです。

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

そして、私はカスケードと特異性にもある程度依存しています。ここでの BEM モジュールは次のようになります。 .primary-box そしてその .header 特定のオーバーライドのコンテキストになります

.header {
  .primary-box {
    color: #000;
  }
}

(私はできる限りすべてを汎用的でコンテキストフリーにするよう最善を尽くしています。つまり、良いプロジェクトとは、ほとんどすべてが再利用可能なモジュール内にあるということです)

最後にもう 1 つ注意したいのは、プロジェクトがどんなに小さくて複雑ではないように見えても、次の 2 つの理由から、最初からこれを行うべきだということです。

プロジェクトは複雑になるため、CSS を含めた適切な基盤を築くことが重要です
WordPress 上に構築されているために JavaScript がほとんどないため、単純に見えるプロジェクトでも、CSS では非常に複雑になる可能性があります。サーバー側のコーディングを行う必要がないので、その部分は単純ですが、パンフレットのようなフロントエンド20 のモジュールとそれぞれ 3 つのバリエーションがあります。非常に複雑な CSS が含まれています。

Webコンポーネント

2015 年、私たちは Web コンポーネントに注目し始めています。私はこれらについてまだ多くのことを知りませんが、すべてのフロントエンド機能を自己完結型モジュールにまとめて、BEM の原則をフロントエンド全体に効果的に適用し、分散しているものの完全に結合されたコンポーネントをコンポーネント化しようとしているようです。すべて同じ UI ウィジェットを構築する DOM フラグメント、J (MVC)、CSS などの要素。

これを行うことで、私たちが BEM などで解決しようとしていた CSS に存在する元の問題のいくつかに対処し、同時に他のフロントエンドアーキテクチャの一部をより健全なものにするでしょう。

さらに読み物がありますここそしてフレームワークもポリマーはこちら一見の価値があります

ついに

私もこれだと思います優れた最新のベストプラクティス CSS ガイド - 大規模な CSS プロジェクトが乱雑になるのを防ぐために特別に設計されています。私はこれらのほとんどに従うようにしています。

私は "コンパススタイル" CSSフレームワークのを見て、あなたをお勧めします。

いくつかの大きな材料がここにあり、一部はそれが別々のまたは個別のいずれかのスタイルシートに来るとき、私は開発のための別々のファイルに移動してに移動しますが、この質問に答えるには、時間のアロット取ったすべての一般的なCSSは全体で使用されてきました展開時に土地を選定は、単一のファイルにマージされます。

開発中に

あなたは両方の長所を持っているこの方法は、パフォーマンス（ブラウザから要求されている以下のHTTPリクエスト）とコード関心の分離を高めます。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow