問題タブ [oocss]

オブジェクト指向 CSS という新しいキャッチ フレーズが Web 開発分野で出現しているようです。

一見すると、これはキャッチーなスローガンにベスト プラクティスがパッケージ化されているだけのように思えます。私は運動の背後にある意図を理解し、完全に尊重しますが、それ以上のことはありますか?

このアプローチをより信頼できるものとして際立たせるさらなる洞察を誰かが持っていますか、それともクラスを正しく継承およびカスケードすることを確認するためのリマインダーとしてそれを取る必要がありますか?

編集:このStackOverflow Questionを指している Kobi による優れたコメントにより、以下の質問を修正しました。

Nicole Sullivan のオブジェクト指向 CSSフレームワークを試した人はいますか?または自分の? もしそうなら、利点/欠点は何でしたか?

フレームワークを使用している生産現場はありますかオブジェクト指向 CSS?

私はニコールサリバンのオブジェクト指向CSS哲学/コーディング方法論/何でも使用することの利点で売られています。特に、私は現在構築しているサイトで「メディアブロック」などの原則を使用することに熱心です。

ただし、液体スタイルのグリッドシステムがバンドルされており、設計者は現在、厳密な960グリッド幅のシステムを構築しています。960グリッドシステムは、固定の12列または16列のレイアウトを使用し、それぞれが40ピクセルまたは60ピクセルで構成されます。OOCSSは、レイアウトを1 / 2、1 / 3、1 / 4、または1/5の部分の流動的な分割に分割します。

960.gsには、列の間にそれぞれ10pxの固有の「ガター」マージンが組み込まれています。OOCSSは、任意の幅にすることができるため、列間にマージンがありません。代わりに、コンテンツとコンテナーを分離するために、コンテンツ要素間にマージンが提供されます。

これら2つのフレームワークの両方の最良のものを当社のCSSボイラープレートに組み合わせて組み合わせるのは悪い考えですか？OOCSSグリッドフレームワークの流動的な性質により、堅固な960ページ幅にはあまり適していませんか？HTML5ボイラープレートも使用しています。

特定のフレームワークをOOCSS（SASSなど）に組み込む場合、2つのアプローチは互いに直交する可能性があり、1つを選択してそれを維持する方がよいことをすでに知っているので、これを求めていますが、これは常にではない可能性がありますケースになります。

新しい Rails 3.1 アプリケーションにOOCSSフレームワークをロードしようとしています。これまでのところ、プロジェクトを /vendor/assists/stysheets/oocss に複製し、/app/assists/stylesheets/application.css からプロジェクトを取り込もうとしました

ただし、コンパイルされた css ファイルには他のファイルをロードする必要がある 2 行しか含まれていないため、これは適切に機能しません。

これをやってのける方法についてのアイデアはありますか？

更新: CSS ファイルを正しい順序で手動でロードすることで、汚い回避策を実行しました。

アプリ/アセット/スタイルシート/application.css

ベンダー/アセット/スタイルシート/oocss.css.scss

よろしくお願いします。アスビョルン・モレル

サイトにグリッド システムを使用する予定ですが、グリッドを選択的に分割できるようにしたいと考えています。これは、たとえば、OOCSS size1of2をsize1of1) に変換することを意味します。理想的には、html は次のようになります。

次に、次の css のようなものがあります。

OOCSSまたは別のグリッドシステムでこれを行う方法を知っている人はいますか? 単純なレスポンシブ グリッドとは対照的に、このレベルの制御を探しています。

オブジェクト指向 css に関するこのプレゼンテーションを見ましたが、それを正しく理解していないか、OO CSS を使用する利点を理解していないと思います。

HTML の例:

CSS の例:

複数の要素のスタイルをすばやく変更できることには利点があると思います。たとえば、配色を切り替えることができれば非常に便利です。

しかし実際には、HTML 内、または少なくともその一部でスタイル/外観を定義しています。もちろん、style一連のグループのスタイルを交換できるため、属性を使用するよりも優れています。

要点は、HTML 内でスタイル グループを定義しているということですが、HTML 内に「論理的な」グループを作成する必要があることを学びました (例: class="nav-item"/ class="btn submit-btn")。CSS はスタイルを完全に適用し、どの要素が「スタイル」から一緒に属するかを定義します。 "視点（例.nav-item, .submit-btn { background: red; }）。

多分私は概念を完全に誤解していました。ただし、CSS を構築する良い方法はまだわかりません。

そのため、OOCSSメディアモジュールを使用していて、その中にリンクを配置していて、リンクの最後の行が切断されています。

フレームワークについて知らない人のために説明するのは簡単です：オーバーフローのある要素を想像してください：隠されており、その要素内のリンク。それで全部です。

この要素内にoverflow：hiddenを使用してリンクを配置すると、overflow：hiddenのおかげで、リンクの最後のテキスト装飾行が切断されます。パディングとマージン（そしてうまくいけばフロート）に頼る必要なしに、とにかくその最後の行が切断されていることを補うことはありますか？Chromeはこれを正しく理解しているようですが、確かではありません。

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

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

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

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

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

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

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

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

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

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

2番目divのアニメーション全体を実行するには、400ミリ秒かかります。トグルの場合は200ミリ秒button-hover、次にトグルの場合はさらに200ミリ秒かかりbutton-rounded-hoverます。これらのトグルを同時に実行するにはどうすればよいですか？

ノート：

• 私はOOCSSを使用しているので、button-roundedextends button、button-rounded-hoverextends button-hover。button-rounded-hoverあまり正確に定義したくないbutton-hoverのは、DRY（Do n't Repeat Yourself）ではないため、2番目のクラスで2つのクラスと2つのホバー呼び出しを使用している理由ですdiv。
• 両方のアクションに200ミリ秒かかる必要があります。どちらも0（瞬時）にしたくありません。