web-dev-qa-db-ja.com

一般的な場合のセマンティクスとスタイルのCSSクラス

class属性のW3C仕様は

作成者がclass属性で使用できるトークンに追加の制限はありませんが、作成者は、コンテンツの目的の表示を説明する値ではなく、コンテンツの性質を説明する値を使用することをお勧めします。

参考

私は多くの異なるページがある大規模なウェブサイトで働いています。実質的にすべてのページで共有されるデフォルトのスタイルシートがあります。次のようなCSSルールセットがあると便利です。

.center { text-align: center; }
.red { color: red; }

ただし、これらのクラスは意味的にコンテンツを記述しません。

テキストを中央揃えにしたり、赤で色付けしたりする必要があるケースが数多くあり、これらの特定のインスタンスのそれぞれが互いに何の関係もない場合があることを理解できると思います。たとえば、クラスwarningは、ある場所では役立つ場合がありますが、別の場所ではasideである場合があります。私は必ずしもallの警告を赤にしたくありません。

これは超技術的な質問だと思いますが、超技術的な答えが欲しいです。セマンティクスを表現しない一般的なスタイルルールとHTML仕様を調整する正しい方法はありますか？これはshudderインラインスタイルの場合ですか？

web-developmenthtmlcss
5
Explosion Pills

私は多くの異なるページがある大規模なウェブサイトで働いています。実質的にすべてのページで共有されるデフォルトのスタイルシートがあります。次のようなCSSルールセットがあると便利です。

.center { text-align: center; }
.red { color: red; }

これは一般的に行われていますが、私の意見では非常に悪い習慣です。すべてのスタイルをインラインで配置するよりも、ほんの少しだけ優れています。あなたが得る唯一の利点は、あなたが赤の異なる色合いを選ぶことができるということです。それはCSSの考え方とは正反対なので、それがそれほど一般的な慣行でなければ、thedailywtf.comの候補になるでしょう。

の代わりに

<div class="warning">Do not cross the streams!</div>

あなたが持っている

<div class="warning red center">...</div>

および他の場所：

<span class="red">...</span>

<div class="center">Some heading or caption or whatever</div>
<div class="warning bold black">A different kind of warning?</div>

クライアントがすべての警告を、右に浮いた黒い境界線のある黄色で塗りつぶされたボックス内の黒いテキストに変更したい場合はどうしますか？代わりに10分かかるはずのタスクは10時間かかります。

確かに、すべてのコンテンツにセマンティッククラス名を割り当てるのは面倒です今が、そうすることで、将来のサイトの外観を非常に簡単に調整できます。 Webサイトが大きいほど、これを適切に行うことが重要になります。ワードプロセッシングアプリケーションに精通している場合は、段落スタイルが使用されていない50章の本のサブセクションの見出しを調整することを検討してください。

一部の「警告」を赤にし、他の「警告」を赤以外にしたい場合は、2つの別々のクラスが必要です。 「警告」と「深刻な警告」。

私はお勧めします超越CSS：Webデザインのファインアート Andy Clarke、Molly E. Holzschlag、Aaron Gustafson、MarkBoultonによる。これは美しい本であり、セマンティックコンテンツをプレゼンテーションから分離する方法と理由を説明するのに最適です。

5
kevin cline

まず第一に、これは良い質問です。それはhyper技術的であり、それは非常に理にかなっているとは思いません。

encouragedはここでのキーワードです。

あなたがしていることは非常に一般的な習慣であり、CSSを使用してこの手法なしにこの種のスタイリングを行うことは非常に困難です。 CSSは要素がどのように見えるかを記述するためにあります。それは私たちのスタイル言語であり、ID、クラス名、およびタグ名に効果的にフックするだけです（他のすべてのセレクターは最後にチェックしたものよりかなり遅くなります）。これらの3つのクラスのうち、最も理にかなっています。これは、IDが一意であり、タグ名が要素の表示方法ではなく、要素が何であるかをさらに説明しているためです。

私はW3Cの主張を理解しています。プログラミングでは、ほとんどの場合、クラスはタイプとオブジェクトが何であるか、そしてそれがどのように動作するかを記述し、どのように提示されるべきかを記述しません。

  • 1つの代替方法は、 [〜＃〜] sass [〜＃〜] などのより堅牢なテンプレート言語を使用し、ミックスインを使用することです（ホームページの例を参照）。これにより、クラスに説明的なクラスを与え、「センター」ミックスインを共有できます。ただし、コードに別のテクノロジーを埋め込む必要があるため、これは好きではありません。 [〜＃〜] less [〜＃〜] もそのような代替手段です。
  • はい、スタイルをインライン化できます。また、プログラムでインライン化することもできます（クラスを使用し、スクリプトでバックエンドにスタイルを埋め込みます）。 W3Cの推奨事項をより厳密に遵守することを除いて、それを行うことの利点は実際にはわかりません。
  • あなたはあなたがしていることをし続けることができます。これは機能しますが、W3Cの推奨に準拠していません。

スタイルをインライン化すると、次の問題も発生します。

  1. iDを持つ要素のスタイル値は、インラインスタイルによって上書きされます。 IDセレクターはクラスセレクターよりも優先されますが、インラインスタイルは両方に勝ります。あなたのスタイルがすべての種類の「中心」である場合、これは問題ではありませんが、覚えておく価値があります。その理由で失敗する壊れたコードがウェブ上にどれだけ存在するかに驚かれることでしょう。
  2. 一部のシナリオでは、クラス 'center'の意味が異なる場合があります。テキストの配置だけでなく、中央に配置するのではなく、追加のプロパティも設定する必要がある場合があります。中央と赤で、それはそれほど大きな問題ではありませんが

これがあなたがすべきだと私が思うことです：

SASSまたはLESSを試してみてください。これらがうまく機能する場合は、時間を大幅に節約できます。それがうまくいかない場合は、ミックスインパターンの形式としてクラスを使用し続け、要素間でプロパティを共有します。

オブジェクトが実際にどのように表示されるかではなく、オブジェクトの表示方法を説明する名前「class」が混乱していることに同意します。今日、クラスはCSSのプレゼンテーションロジックとJavaScriptのコードロジックの両方で2倍になっています。

幸運を！

1
Benjamin Gruenbaum

モバイルバージョンなど、複数のスタイルを設計する場合は、よりセマンティックなクラス名を使用すると非常に便利です。それらは多くのコードを共有するかもしれませんが、モバイル版では「center」を中央に配置すべきではない場合があります。または、何かが別の背景に置かれているため、赤ではなく栗色を使用する必要があります。 'center {text-align：right;}'のようなスタイル変更は混乱を招きます。

だから私は意味的な意味を奨励し、それらをスタイルします。繰り返し発生するスタイルの冗長なコーディングを回避するには（たとえば、「font-weight：bold; text-align：center; color：red;」など、いくつかの警告やその他の赤いテキストのSass以下が非常に便利です。

ただし、複数のスタイルがなく、レイアウトが変更されない限り、すべてのクラスの名前を変更するのに年齢を費やすことはありません。結局のところ、それはあなた自身の便宜のためだけです（そして、もしあれば、あなたの後の開発者です。）役割属性を使用するものがあるとしても、ブラウザはセマンティカルな値で何もしません。

インラインスタイルはあまり使用しませんが、便利な場合があります。たとえば、スタイリングがツールから発生して生成された場合です。フープを飛び越えて生成されたコードをクラスに書き直してスタイルを設定するだけでは生産的ではありません。 （特にツールの設定を変更する場合は、簡単に変更できます。）

0
Inca