1

オブジェクト指向 CSSに関するNicole Sullivanの理論を少し読んでいました。簡単に言えば、基本的な考え方は、Web サイトのスタイルを設定するたびにゼロから始めるのではなく、既に作成されたいくつかの基本的なビルディング ブロックをクラスとして使用し、ニーズに合わせて拡張する方がおそらく優れているということです。(「拡張」には、より具体的な/オーバーライドするクラスを HTML に追加することが含まれます。これは、CSS クラスが相互にルールを継承することが不可能であるためです...できれば CSS4 で? :) OOCSS の原則は、必要がないという事実に触発されています。倍精度数の正弦を求める必要があるたびに、 Java Math クラスを書き直してください。コードはすでに (誰かによって) 書かれているので、それを使用してみませんか?

抽象的には素晴らしい提案だとは思いますが、適用可能な観点からそれを把握するのに苦労しています。[私の特定の質問については以下をお読みください。しかし、私は常に読み物を探していますので、少し立ち止まって、OOCSS リソースへのリンクを追加してコメントしてください。たとえば、利点や批判などです。]

ここに私のスタイルシートがあります:

.heading {...} /* for all heading styles */
  .alpha   {...} /* specific changes for h1 */
  .beta    {...} /* specific changes for h2 */
  .gamma   {...} /* specific changes for h3 */
  .delta   {...} /* specific changes for h4 */
  .epsilon {...} /* specific changes for h5 */
  .zeta    {...} /* specific changes for h6 */

最初のセレクターはfont-family、letter-spacing、 などの共通のプロパティを持つ任意の見出し用です。次に、各「サブクラス」(実際にはサブクラスではありません) にはcolor、font-style、font-weight、 などの特定の違いがあります。これらの「サブクラス」が後 .headingに書かれているという事実スタイルシートの は、それらのいずれかに値が等しくない等しいプロパティが含まれている場合、のプロパティ.headingは「サブクラス」のプロパティによってオーバーライドされることを示します。見出し 1 を取得するには、次のように記述します。

<h1 class="heading alpha">Contact Me</h1>

span実際、 、 withなどの任意の要素のスタイルを設定できますclass="heading alpha"が、これは実際にはh1要素です。

【もちろん、言えるようになりたい】

.heading {...}
  .alpha {
      extends: .heading;
      ...
  }
==============================
<h1 class="alpha">Contact</h1>

しかし、まだその段階には達していません。]

私の質問は、heading alphas が通常左揃えの場合、このインスタンスを中央に配置するにはどうすればよいですか? ニコルは、彼女のスタイルシートをインポートして彼女の.txtC {text-align:center;}ルールを使用するべきだと言うので、私のコードは次のようになります。

<h1 class="heading alpha txtC">Contact Me</h1>

ただ、基本的にCSSのルールやクラスを1対1で対応させるのはちょっとやり過ぎかなと思います。この方法を使用した場合、独自のスタイルシートを作成する必要はありません。代わりに、大量の小さなクラス (「レゴ」) を HTML コードに追加するだけで、かさばって判読できなくなります。次のことを想像してください。

    <p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a 
    size 12pt, italic, Arial, left-right justified, 1.2em line height, dark 
    blue paragraph.</p>

1 つのクラスspecialParagraph (paragraph-specialまたは何でも)を作成し、それらすべてのルールを CSS に割り当てる方が理にかなっているのではないでしょうか? レゴはいらない？私の場合、連絡先ページの上部に追加することはできませんか? .alpha {text-align: center;}それともインライン？

4

3 に答える 3

1

OOCSS の方法のポイントは、主に他のライブラリから CSS スニペットを借りて、誰もやったことがないことをしているときにのみ新しいルールを作成することではありません。明らかにそれは不可能であり、おそらく自分でロールバックするよりも優れているとは言えません.

OOCSS のポイントは、スタイルを可能な限り抽象化することです。それらがより具体的であるほど、再利用性が低くなり、そうすると、より多くの CSS を記述することになります。

これをプログラミング用語で言えば、車のクラスを作成してから、あらゆる種類の一般的なメソッドを共有するトラックのクラスを作成する代わりに、車両のクラスを作成し、そこから車とトラックを拡張します。

CSS でこれに相当するのは、クラスを mixin として使用することです。たとえば、多くの<ul>要素を使用していて、margin と padding を常に 0 に設定し、リスト スタイルを none に設定している場合は、おそらくそれを行う.resetクラスを作成し、そのクラスを<ul>代わりに適用する必要があります。すべてのナビゲーション アイテムとリスト アイテムに対して、同じ 3 つのルールを何度も書く必要があります。

もう 1 つのポイントは、視覚的な観点から抽象化について考える必要があることです。たとえば、サイトのほとんどのセクションが境界線で囲まれたボックスにある場合は、次のような基本的なクラスを作成できます。

.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}

.bordered-box次に、色や幅など、定義されていないスタイルを混在させる他のクラスを作成します。

css クラスを、単に要素に追加して特定の外観にするためのプロパティのリストと考えるのではなく、サイトを構築するために使用するツールボックスと考えてください。

このような HTML についてのポイント: class="ital size-medium sans-ser txtJ med-height dark-blue"、ビジュアル オブジェクトを定義する CSS クラスの作成と、単に CSS プロパティを定義する CSS クラスの作成を区別することが重要です。後者はばかげています。それを行う場合は、インライン スタイルを使用することもできます。

于 2012-01-12T05:41:50.973 に答える
0

別のスタイルシートを使用するだけでサイトのルックアンドフィール全体を変更できるはずのCSSの精神に反する、.txtCまたはそのようなものを使用すると思います。.dark-blue

たとえば、発生する可能性のある問題の例として、すべてのヘッダーを青ではなく赤にすることにしたとします。CSSを単にに更新するのではなく.header { color: red }、HTMLのすべてのページを調べて、dark-blueクラスをに置き換える必要がありますred。または、CSSをに変更することもできますdark-blue { color: red; }が、クラス名は意味がありません。

align="center"考えられるすべてのルールにクラスを追加すると、インラインスタイルとすべての要素の暗黒時代に戻ってしまいます。

「オブジェクト指向」CSSを使用する場合は、すべてのヘッダーに影響を与えるクラスがあるような方法で使用する必要がありますが、.headerホームページヘッダーに別のフォントの色が必要な場合は、.header.home { color: cyan; }CSSルールを追加します。CSS IDとクラス名には、提供するスタイルではなく、影響を受けるコンテンツを説明する必要があります。

于 2012-01-12T06:38:37.873 に答える
0

「オブジェクト指向 CSS」は、CSS を最大限に活用するための単なるデザイン パターンであり、Jonathan Snooks がSMACSSと呼んでいるアプローチと基本的に同じです。

それを OOCSS と呼ぶか SMACSS と呼ぶかにかかわらず、このアプローチの鍵は、nav 抽象化のような一般的な UI 要素を作成することです。これらの UI 要素は、追加のクラスを要素やコンテナー要素に追加することで、より具体的な機能で拡張できます。または、別の方法として、要素の ID またはセマンティック クラスを使用して、独自のカスタム CSS ルールを追加することもできます。

Cascade Frameworkは、このアプローチに基づくまったく新しい CSS フレームワークです。小さなフットプリントで最適なパフォーマンス、最適な柔軟性、最適なモジュール性を提供します。

于 2013-03-25T21:10:22.860 に答える