属性を使用する際の問題の1つは、属性が常にhtml要素のタイプに関連付けられていることです。したがって、上記の例では、同じスタイルをタグdata-header
に適用する場合など、divにのみ適用できます。<p>
スタイルを再度作成する必要があります。
p[data-header]
そして、あなたが話している唯一の利点は、入力が少なくて済むことです。それは些細な利点です(つまり、処理時間やレンダリング時間の短縮、保守性の向上などはありません)。
オブジェクト指向CSS(OOCCSS)の原則を検討することをお勧めします。ここで、この重要な原則があります。
オブジェクトは、どこに置いても同じように見えるはずです。したがって、特定のh2を.myObject h2 {...}でスタイル設定する代わりに、h2 class = "category"のように、問題のh2を説明するクラスを作成して適用します。
これにより、cssの再利用性が向上します。cssの管理が不十分な場合の一般的な問題は、何千行ものcssが簡単に作成され、その多くが冗長になる可能性があることです。
OOCCSSがcssをより再利用可能にする方法の具体例については、この回答を参照してください。
重要な更新:属性よりも再利用可能なクラスを持つという点で上記で述べたことは真実ではありません(以下の説明を参照)。したがって、無視してください。
今では言われていますが、HTMLのスタイルを設定するために属性のみを使用することは避けたいと思います。設計されたものとは異なる目的でcssプロパティを使用しているという唯一の理由がある場合
(一般的に、コードを巧みに使いすぎるのは良い考えではありません。時間などを節約できますが、後でコードを使用する人を混乱させる可能性があります。常に、世界中の他の人の態度でコードをコーディングしてください。世界はあなたのコードを手に入れるかもしれません..そして、読みやすさはより少ないコードなどよりも優先されます。特に、処理時間などの他の利点がまったくない場合はそうです)。
たとえば(そして私は何の研究もせずにこれを言っています..私はcssを使用して私の10年以上の経験に依存しています)..あなたのコードでこれを見ると
<div data-header>
このデータヘッダーが一意のセレクターであるか、他の場所に存在できるかどうかはわかりませんが、これが表示された場合:
<div class="data-header">
そうすれば、これは一意のセレクターではないことを(コード内の他の場所を見なくても)すぐに結論付けることができます。同じページ内の他の要素、または同じクラスが適用されている他のページも表示されることを期待できます。 ..(つまり、..を使用するのとは対照的に<div id="data-header">
)
私がjavascript/jQueryの人で、あなたの'eは単にデザイナーだとしましょう。これは、CSSを設計された方法で使用しているという理由だけであなたが提供した暗黙の情報です。しかし、すべて賢くなり、CSSプロパティを独自の方法で使用し始めると、それが問題のレシピになります(ここでの私の質問とその下でのコメントを参照してください。すべての人にとってxを意味するものを入手して作成するのは悪い考えです。それはあなたのためだけにyを意味します)。