私のページには、と(メニューパネル、情報パネル、フッターパネルなど)div
に関して同じスタイルのブロック()がいくつかあります。background
border
今、私はそのスタイルを一度だけ書き、すべてのパネルでそれを繰り返さないようにしたいと思います。それでも、私はそれを行うための快適な方法を見ていません。
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++のようなものです。これを達成する方法はありますか?私はそれを疑うが多分...
そうでない場合、他の方法はありますか?