以下のようなコードを書くのは間違っていると言われました。要素にブロックとその悪いビームを含めることはできないと思います

このように書こうと思ったのですが、階層も表示されません。

これは別の方法ですが、私には上記の例よりも悪いようです。

私が最初にコーディングした方法は間違っていますか？もしそうなら、その理由と、最良の代替手段は何ですか。

質問する前に、私が参照しているコードは次のとおりです。

ボックス オブジェクト

Bootstrap で Island や Islet などのコンテンツをボックス化するために使用されます。

ラウンドスキン

角を丸くします。ボックスなどのいくつかの抽象化クラスで使用されます。

抽象化をスキン化するコードでは、次のように記述します。

グレー、アラート、ラベルなど、ボックスを拡張する他のスキンがあります。

それでは質問です

私はボタンオブジェクトに取り組んでいます。しかし、ボックスと同じルールと修飾子があり、ラウンドの同じ修飾子を持つことができるので、スキンとして宣言するだけでよいでしょうか? すべてのボタンは、「外観」について約 4 つのルールを追加するだけです。余白やパディングを台無しにする場合は、オブジェクトにする必要があります。

あなたが書くコードで

または、サイズを小さくする

それをドライに保つのはやり過ぎですか？私が心配しているのは、ボタンがページ上で非常に一般的な要素であることですが、実際には、オブジェクトと既に記述した修飾子を拡張しているだけです。

Windows 8 で見られるように、チャームを作成するための純粋な oocss アプローチに取り組んでいます。Dock クラスは完成しましたが、マウスがドッキングされた領域に移動したときにチャームを「拡張」する方法を理解するのに問題があります。コンテンツを非表示にする方法があることは知っていますが、ブラウザーをチャームの :hover イベントに応答させます。何かアイデアがありましたら、お知らせください。

ドック

コンテンツを画面の端にドッキングします。

魅力

コンテンツを含む島。

HTML

パディングして幅を 1px に設定しようとしましたが、うまくいきませんでした。私の当初の計画では、移動が背景色の上を移動したときに背景色を適用していたので、画面の端に下る線はレンダリングされませんでした。

これは私が得たのと同じくらい近いですが、醜いです:

私はしばしば次の問題を提示されます。

次のようなマークアップがあります。

これを大規模に想像してみてください。さまざまなナビゲーション項目、段落、および一般的な高度なものが含まれています。

私は OOCSS と Modular CSS の原則に従い、場所に基づくスタイリングを避けようとしていますが、多くの場合、CMS はどこにでもクラスを追加できるほど柔軟ではありません。

したがって、メインコンテンツのすべてのリンクに境界線を付けてスタイルを設定するには、次のようにします。

しかし、どういうわけか私のすべてのリンクはleft-column最終的に境界線で終わります. 次に、行って上書きする必要があります。

そして、これが混沌の始まりです。変更を行うたびaに、リセット スタイルをすべての「例外」に追加する必要があります。

それから私は試みます

しかし、それはさらに悪いことです。なんで？id は強力なセレクターであり、通常は境界線が適用されない #main-content 内のリンクを上書きするためです。

リセットせずに効率的なリンクのスタイリングを行うための提案はありますか? CSS「スコープ」がまだリリース候補モジュールではない場合、この問題を解決するために CSS がネイティブに提供するツールはどれですか? たとえば、ルールの出現順序は役に立ちますか?

私の質問は、実際にはタイトルが言うよりも広いです。これは、私が自分のアイデアで問題に直面しているところですが、あらゆる種類の解決策を受け入れています. 私の全体的な目標を説明しましょう。

私は、CSS プリプロセッサーができることを気に入っています。私は OOCSS と SMACSS のアイデアが好きです。私はこれらすべてに慣れていません。私は自分の設計手法をアップグレードして、あらゆる世界の最高のものを何らかの方法で取り入れようとしています. 私は次のように機能する理論的な方法を持っています：

• セマンティックなクラス名やIDなどのみを使用してください
• 一般的なスタイル シートでモジュールまたはパターンを定義する
• 共通のスタイルシートから特定のページに関連するセマンティック セレクターにモジュールを @extend するページごとのスタイルシートを持つ

したがって、この：

プラスこれ：

これになります：

他の人がこれを行うのを必ずしも見たことはありませんが、私には良い考えのように思えました. 私の壮大な計画で私が遭遇している問題は、 @extend がインポートされたファイルから機能していないように見えることです。SOのどこか他の誰かが、それは不可能だと言いました。これは本当ですか？ミックスインが機能するようになりましたが、出力CSSのすべての属性が複製されるという問題があり、これは理想的ではないようです。

私は実際にはLESS（構文）の方が好きですが、現時点では拡張さえありません。ミックスインの非効率性について心配する必要はありませんか、それとも私が求めていることを達成する方法はありますか?

注: Prepros というツールを使用して sass を自動コンパイルしています。上記のようなコードをコンパイルしようとすると、次のようなエラーが発生します。

... \sass\home.scss の 11 行目の警告: "#intro" は @extend "ruddy" に失敗しました。セレクター「ruddy」が見つかりませんでした。

コードをmodule.scssからhomepage.scssにコピーするだけで、問題は解決します。

OOCSS プリンシパル (inuit.css、smacss など) に従う 3 層スタイル ガイドの構造/アーキテクチャに関する議論を求めています。inuit.css に精通している場合は、フレームワークが 2 つのレイヤーで構築されていることがわかります。最下層 (基盤) は inuit.css のコアを表します。基本的に、決して変更してはならないオブジェクトと抽象化。2 番目の層には、基礎層への拡張機能、つまり、目前のアプリケーションに固有のスキンとテーマが含まれます。基本オブジェクトをスキニング/テーマから分離するという同じ根本原理が、Nicole Sullivan による OOCSS で伝えられています。そうは言っても、3 つのレイアウト シナリオに関するディスカッションを探しています。最初のレイヤーは基本オブジェクトを表します。2 番目のレイヤーは、ローカル レベルでのベース オブジェクトへのスキン/テーマ/拡張機能を表します。

50 の異なるアプリケーションを持つ会社があるとします。グローバル スタイル ガイドを継承するには、50 個のアプリケーションすべてが必要です。次に、50 のアプリケーションのうち 25 を統合し、同じスタイル ガイドを継承する必要があるとします。地方レベルでしょう。最後に、25 個のアプリケーションのそれぞれに、ローカル ガイドとグローバル ガイドをオーバーライドするために必要な特定のテーマが設定されている場合があります。また、SASSプリプロセッサをアーキテクチャに含める必要があることにも言及する必要があります。先行する各レベルは、以前に確立された変数をオーバーライドする機能を備えている必要があります (例: グローバル割り当て変数 base-font-size 変数を 16px に。ローカル アプリケーションは base-font-size を 15px にオーバーライドします。ローカル アプリケーションの 1 つは、ローカル レベルを base-font にオーバーライドします。・サイズは12px。

人々がディレクトリ構造をどのようにフォーマットするのか知りたいので、回答を楽しみにしています!

たとえば、次のようなスタンドアロン ブロックがあります。

このブロックはたまたまヘッダーに存在しますが、どこにでもある可能性があります。現在、ヘッダーにある場合は、左にフロートし、境界線も付ける必要があります。もしそうなら、これはそれを行う正しい方法ですか：

またはBEMに従って：

2つのうちどちらが優れていますか？