BinaryDevelop
  1. ホーム
  2. css

[解決済み] CSSの爆発を管理する

2022-03-14 18:08:27

質問

私が制作しているウェブサイトでは、CSSに大きく依存しています。現在、すべてのCSSスタイルがタグ単位で適用されているため、将来の変更に対応するため、外部スタイルに移行しようとしています。

しかし、今問題なのは、私が "CSS Explosion" を得ていることに気づいたことです。 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ファイルを簡単に使えるようにし、Web開発のスピードを上げる力を発揮することです。そうすれば、将来このサイトで働くかもしれない他の人たちも、私がやったようにコーディングのやり方を覚えるのではなく、良いコーディングのやり方を実践するようになるでしょう。

解決するには？

これは非常に良い質問です。特にチームで作業していると、それだけではありませんが、しばらくするとCSSファイルが制御不能になる傾向があります。

私自身が心がけているのは以下のようなルールです（いつも守れているわけではありません）。

  • 早期にリファクタリングし、頻繁にリファクタリングする。 CSSファイルを頻繁に整理し、同じクラスの複数の定義を融合させる。古くなった定義を削除する すぐに .

  • バグフィックス中にCSSを追加する場合、その変更が何を意味するのかコメントを残してください（"これはIE < 7でボックスが左揃えになるようにするためです")。

  • で同じものを定義するなど、冗長性を避ける。 .classname と .classname:hover .

  • 使用コメント /** Head **/ を使用して、明確な構造を構築します。

  • 一定のスタイルを維持するのに役立つプレティファイアツールを使用します。私が使っているのは ポリスタイル 私はこの製品に非常に満足しています（価格は15ドルですが、十分に元が取れます）。無料のものもあります（例． コードビューティファイア をベースに CSS Tidy オープンソースのツールです）。

  • センスの良いクラスを構築する。これに関する注意点は以下を参照してください。

  • セマンティクスを使用し、DIV スープを回避します。 <ul> をメニューに使うなどしてください。

  • できるだけ低いレベルですべてを定義する（たとえば、デフォルトのフォントファミリ、色、大きさを body を使用します。 inherit 可能な限り

  • 非常に複雑なCSSを使用している場合、CSSプリコンパイラが役に立つかもしれません。これから xCSS というのも、同じ理由からです。他にもいくつかあります。

  • チームで作業する場合、CSSファイルの品質と標準化の必要性を強調する。プログラミング言語のコーディング標準はよく知られていますが、CSSにも必要であるという認識はあまりありません。

  • チームで仕事をする場合 する Version Controlの使用を検討してください。そうすることで、物事の追跡がより簡単になり、編集上のコンフリクトもより簡単に解決できるようになります。たとえ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では は複数のクラスで問題があります。 を使用するため、この例では id s. 

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を使用する必要があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します