4

私のページには、と(メニューパネル、情報パネル、フッターパネルなど)divに関して同じスタイルのブロック()がいくつかあります。backgroundborder

今、私はそのスタイルを一度だけ書き、すべてのパネルでそれを繰り返さないようにしたいと思います。それでも、私はそれを行うための快適な方法を見ていません。


panelClass私が調査したアプローチの1つは、一般的なパネルスタイルをキャプチャする専用クラス(たとえば)を導入することでした。次に、(X)HTMLで、パネルになるはずのすべての要素にそのクラスを追加します。

しかし、これは正しく感じられません。結局のところ、私は(X)HTMLで「実装を明らかにする」ことになります。(X)HTMLを変更する必要があるため、透過的に簡単に変更することはできなくなりました。

言うまでもなく、クラスの順序(したがって、必要に応じてCSS属性が上書きされる順序)に問題が発生します。

編集:(コリンの答えの詳細な説明)

「実装を明らかにする」とは、(X)HTML(「コンテンツ」)がCSS(「プレゼンテーション」)に私が望むよりもはるかに強く関連していることを意味しました。到達不可能な理想(非現実的またはダミーの理想でさえも!)を追求しているのかもしれませんが、「コンテンツ」を「プレゼンテーション」から分離しようとしています。

したがって、クラスを持つことは、menu「プレゼンテーション」ではなく「コンテンツ」を記述するため、悪くはありません。代わりに(引用された記事やそのサイトの他のいくつかの記事から私が理解したことを)使用している間menu box bordered left_column、それはプレゼンテーションとコンテンツを混合するので、のようなクラスは悪いです。このようなクラスの追加を開始したら、そのCSSをstyle属性に直接追加することをお勧めします。それは確かにはるかに多くの作業と維持不可能な結果になるでしょうが、概念的には(コンテンツとプレゼンテーションの分離に関して)それは違いを生まないでしょう。

今では、実際のページ(リッチで素敵なもの)の実際の生活では、コンテンツをプレゼンテーションから完全に分離することは事実上不可能であることに気づきました。しかし、それでもあなたは少なくともそうしようとするかもしれません(すべきですか?)。

また、記事の最後にある「しかし」を見てください。CSSに適用される単一責任の原則。私の意見では、island彼が使用したクラスは、内容を説明していないため、すでにプレゼンテーション用です。それを表示する方法を説明します。そして、コンテンツに関して共通点がない要素で彼がそのクラスをどれほど広く使用したか(または使用した可能性があるか)を見ると、それはすぐにわかります。

編集終了


別のアプローチは、セレクターのグループ化を使用することでした。だから私は次のようなものを持っているでしょう:

#menu, #info, #footer {
  background: /* ... */
  border: /* ... */
}

これにより、(X)HTMLを変更する必要がなくなります。しかし、それでも注文の問題が発生します。また、スタイルを論理的にグループ化することも困難になります。特にそれらが多くのファイルに分散している場合。


私が本当に望んでいるのは、属性のグループに名前を付けて、セレクターに何らかの方法でインポートできるようにすることだと思います。#includeたとえば、C++のようなものです。これを達成する方法はありますか?私はそれを疑うが多分...

そうでない場合、他の方法はありますか?

4

1 に答える 1

3

クラスを使用してスタイルを定義するのが正しい方法です。

私が調査したアプローチの1つは、一般的なパネルスタイルをキャプチャする専用クラス(たとえば、panelClass)を導入することでした。次に、(X)HTMLで、パネルになるはずのすべての要素にそのクラスを追加します。

私にとって、これはまさに私がそれをする方法です。

しかし、これは正しく感じられません。結局のところ、私は(X)HTMLで「実装を明らかにする」ことになります。

実装の公開にセキュリティ上の問題はありますか?

ハリーロバーツからのいくつかの選択された投稿:

http://csswizardry.com/2012/04/my-html-css-coding-style/

http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/

http://csswizardry.com/2012/05/keep-your-css-selectors-short

私はCSSアイオープニングを使用する彼のスタイルを見つけました、そしてそれはあなたを助けるかもしれません

アップデート

更新に続いて、構造をプレゼンテーションから分離するように努めるべきであることに同意しますが、それを完全に管理できない場合もあります。それが完全に可能かどうかはわかりません。

私はクラスについて部分的に同意islandしません。私にとってのパディングプロパティは、構造と表現の境界を越えてホバリングします。適用される要素のレイアウトを変更するため構造的であり、パディングによってページ上での外観が変更されるため表示的です。

menu box bordered left_column理想的な世界では、構造と表現を分離するクラスをいくつか作成するため、を含むクラス属性は必要ありません。

あなたのケースについて考えると、パネルクラスを作成するかもしれません。.panel{margin:10px 0; パディング:10px; 表示ブロック }

およびパネルディスプレイクラス

.panel-display {background-color:#1111e4} .panel-display> a {color:#fff}

このようにして、サイトの構造に影響を与えることなく、プレゼンテーションを試すことができました。(nbこれがとにかくあなたを助けるかどうかはわかりません!、それは私には論理的に思えます)

于 2013-01-15T09:45:52.467 に答える