問題タブ [oocss]

oocss-compass プラグインの設定に問題があります。私が行った手順：

1. oocss-compass をダウンロードし、デスクトップ (https://github.com/he8us/oocss-compass) に配置しました。実行した oocss-compass destkop フォルダー内:

   宝石は私の宝石リストにあります (oocss-compass)

2. 次に、作業フォルダー (RoR プロジェクトではなく、空のフォルダーと html 静的ページのみ) で、次を実行しました。

   /li>

そして、それは私にエラーを返します:

何が欠けている可能性がありますか、またはインストール時に何が間違っていましたか?

私は今日OOCSSについて読んでいましたが、そのアプローチを使用することで2つの利点があると言われています

1. CSSの短縮=パフォーマンスの向上
2. 保守性の向上

2番目の点に同意しますが、最初の利点は、再利用性を高めるクラスをhtmlに追加することで、cssを短くすることです。ただし、Webサイト全体のCSSファイルはブラウザーにキャッシュできますが、各ページのHTMLは異なります。

私の質問は、CSSファイルを短くするとhtmlにバイト（クラス）を追加することでサイト全体のパフォーマンスを向上させることができるのに対し、cssは単一のファイルであり、キャッシュに一度にダウンロードされるということです。

重複の可能性:
JavaScript から CSS ルールセットを変更する

インライン スタイリングを行わずに Css スタイルシート宣言を変更する可能性があるかどうか疑問に思っていました。

簡単な例を次に示します。

これにより、青く書かれたボックスが表示され、ホバーすると緑に変わります。

色にインライン スタイルを指定すると、ホバー動作が失われます。

それは、何があっても、赤い書かれたボックスを与えます。

したがって、私の質問は、スタイルをインラインのもので上書きするのではなく、css 宣言オブジェクトにアクセスして変更するにはどうすればよいかということです。

ありがとう、

ここで説明されているように、メディア オブジェクト モジュールを使用する背後にあるアイデアが気に入っています。

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

多くの HTML パターンに適用できる css であり、画像の大きさやモジュールが含まれるコンテナの大きさに関係ないという大きな利点があります。

問題は、このようにソースの最初に来るメディア (画像など) に依存していることです。

そのコンテンツ div 内に次のような見出しがある場合、これはセマンティックな問題になります。

このように、h1は画像の前にあるはずですが、画像の後にあるため、ドキュメントのアウトラインは理にかなっています。次のようになります。

画像またはコンテンツ div の幅がわからない場合に、リキッド レイアウト コンテナーでこれを行う方法を知っている人はいますか?

前もって感謝します！

SCSSを使用してCSSをクリーンアップしてクリーンにしようとしています。

標準CSS：

vs SCSS：

使用されない'generic-hr'クラスの作成を回避する方法はありますか？ある種の巣がうまくいくことを望んでいました。このシナリオでは、CSSはSCSSよりもはるかにクリーンで読みやすくなっています。

理想的には、SCSSで機能するためにこれが必要になります。

出力：

たとえば、どちらが優れているか:

方法 1 (クラスに個別に名前を付ける):

また - - - - - -

方法 2 (チェーン クラス):

2つの中でより良い習慣は何ですか?

質問：2番目のOOCSS原則は本当に有効ですか？

OOCSSの第2の原則によれば、場所に依存するスタイルは想定されていません。

https://github.com/stubbornella/oocss/wikiからの引用

基本的に、これは「場所に依存するスタイルをほとんど使用しない」ことを意味します。オブジェクトは、どこに置いても同じように見えるはずです。したがって、特定のh2を.myObject h2 {...}でスタイル設定する代わりに、h2 class = "category"のように、問題のh2を説明するクラスを作成して適用します。

これの実際的な例を見てみましょう。通常のボディ（白い背景）と巨大なフッター（黒い背景）を備えた標準の2.0セットアップがあるとします。ボディには黒のリンクがあり、フッターにはもちろん白が必要です。これを簡単に実現するための最も簡単で直感的な方法ではありません。

OOCSSの原則に従う場合は、最初にクラスを作成する必要があります。

次に、反転させたいすべてのリンクにそのクラスを追加します。それは面倒なようです。

カスケードにスタイルを作るという言語全体の目的ではありませんか？私はここで何かを誤解していますか？

N. Sullivan の OOCSS メディア オブジェクトの使用。元の CSS を変更して、オーバーフローの非表示を削除し、micro-clearfix に置き換えました。私が直面している問題は、メディア オブジェクトをネストしようとすると、ネストされたメディア オブジェクトがフロートをクリアしないことです。オーバーフローを回避しようとしています: hidden;

見てみましょう: http://codepen.io/anon/pen/kDpLr

私は現在、ニコールサリバンのOOCSSグリッドモジュールのバリエーションを詳しく説明しています。これは、直系の子孫のレイアウトを決定するために単一のコンテナクラスのみを必要とします。これには、CSS3をサポートするブラウザーでのみ機能するという警告があります。

違いの例を次に示します。

バニラOOCSSグリッドルール：

私の縮小グリッドルール：

もう1つの重要な注意点は、要素の小数サイズが兄弟の数によってのみ決定されるという仮定です。これがこのコードの重要なポイントです（あちこちで明示的なサイズなしでよりスリムなHTMLを有効にするため）が、必要に応じて例外があります。不均衡な幅を持つこと。

セレクターの特殊性のため、OOCSSモジュールを単純に元に戻すことはできません。HTMLでunitXofYクラスを指定することは、デフォルトの仮定に優先するために特別に行われますが、実際には、セレクターはより強力であり、指定されたクラスを常にオーバーライドします。 。

私が探しているのは、特異性の実際的な効果を制限することなく、これらのセレクターに取って代わる最も簡単な、または最もエレガントな方法です。つまり、クラス以外の選択された要素について、常に正しいとは限らないという仮定をしてはなりません。