html - 添付されたスタイルを直接説明する「floatleft」のようなcssクラス名は避けるべきですか？

Question

多くのWebサイトでは、クラスに関連付けられているスタイルを説明する、、、、などのクラス名が使用されていますfloatleft。これは理にかなっているように思われるので、新しいコンテンツを作成するときに、要素を簡単にラップして、希望どおりに動作させることができます。clearfloatalignrightsmallcenter<div class="clearfloat">...</div>

私の質問は、このスタイルの命名クラスは、コンテンツをプレゼンテーションから分離するという考えに反するものではないかということです。要素class="floatleft"を配置することは、プレゼンテーション情報をHTMLドキュメントに明確に配置することです。

添付されたスタイルを直接説明するこのようなクラス名は避けるべきですか？もしそうなら、どのような代替手段がありますか？

明確にするために、これはクラスに名前を付けるだけの問題ではありません。たとえば、意味的に正確なドキュメントは次のようになります。

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>

これらすべてのdivがフロートをクリアする必要があるとすると、cssは次のようになります。

div.foo, div.bar, div.foobar {
    clear:both;
}

これらのクリアリング要素の数が増えると、これは醜くなり始めますが、単一の要素class="clearfloat"は同じ目的を果たします。表示情報がHTMLに忍び寄ることを意味する場合でも、CSSでの繰り返しを避けるために、添付されたスタイルに基づいて要素をグループ化することをお勧めしますか？

更新：すべての回答をありがとう。一般的なコンセンサスは、これらのクラス名を避けてセマンティック名を優先するか、少なくともメンテナンスを妨げない限り、控えめに使用することです。重要なことは、レイアウトを変更してもマークアップを過度に変更する必要がないことだと思います（ただし、全体的なメンテナンスが容易になれば、小さな変更でも問題ないと言う人もいます）。CSSコードを小さく保つための他の方法を提案してくれた人々にも感謝します。

score 42 · Accepted Answer

再設計するまでは素晴らしいですnarrowが、黄色で強調表示centerされ、左寄せに変換され、呼び出した画像がfloatleft右側に表示されます。

floatleftとをCSSクラス名として使用することの罪を認めますclearが、コンテンツの意味に関連する名前（など）を選択すると、CSSを維持するのがはるかに簡単になりfeedbackますheroimage。

score 36 · Accepted Answer

プレゼンテーションクラス名

HTML仕様は、この問題について明確です。

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

clearleftコンテンツの性質を説明していますか？あまり。エリックマイヤーは少し前にこれについて冗談を言った。

ここに画像の説明を入力してください

一見無関係な要素間の構造的な関係を見つけてみてください

アヒルに関する段落、サルに関する段落、カエルに関する段落があるとします。あなたは彼らに青い背景を持たせたいのです。

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

次のCSSルールを追加できます。

p.duck, p.monkey, p.frog {
    background-color: blue;
}

しかし、それらはすべて動物ではありませんか？animal別のトークンを追加するだけです：

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

そして、CSSルールを次のように変更します。

p.animal {
    background-color: blue;
}

それは難しいことであり、常に可能であるとは限りませんが、重要なことはすぐに諦めないことです。

できない場合はどうなりますか？

構造的な関係がまったくない要素がたくさんある場合は、ドキュメントに構造上の問題があることを示しています。これらの要素を減らすようにしてください。とはいえ、1つのルールにn個のCSSセレクターをグループ化する方が、HTMLドキュメントにn個のプレゼンテーションクラストークンを追加するよりも優れています。

score 19 · Accepted Answer

スタイルクラスはセマンティックである必要があります。これはセマンティックWebページのデザインに関するすばらしい記事です（とにかく、それは本当に役に立ちました）。

編集：私はちょうどフロートの代わりになどのようなものを使用するためのいくつかの良い点を作る別の記事を読みました。それはそれらの厄介なクラスを避けるのに役立つはずです。ただし、それらをセマンティックにするのは常にあなた次第です。display: inline-blockdisplay: tablefloatleftclearfix

score 14 · Accepted Answer

floatleft、などの名前のクラスを持つことの主な問題clearは、デザインの変更がHTMLマークアップの変更を意味するという事実です。これは起こらないはずです。コンテンツとプレゼンテーションの真の分離は、同じマークアップを複数のデザインまたはメディアで再利用できる場合にのみ達成されます（サイトのデスクトップバージョンとモバイルバージョン間で同じHTMLを共有し、スタイルシートを切り替えるだけだと考えてください）。

さて、実際の例として:)。Fredrikの答えを追加するために、LESSCSSではスタイル宣言/ミックスインを開発者から隠すことができます。このようにして、HTMLにポップアップする危険を冒すことなく、スタイルシート内の再利用可能なコンポーネントを保護できます。

サンプルマークアップ：

<div class="branding">Company Name</div>

サンプルlessコード：

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

もちろん、モバイルの場合は、他のスタイルを使用せずに、会社名を太字にしたい場合があります。

.branding {
    color: pink;
    font-weight: bold;
}

score 6 · Accepted Answer

関数を説明するクラス名とIDは、要素のスタイルを説明する名前を使用するよりも優れています。

私の意見では、スタイルシート全体に追加するよりも、有名なclearfixハックclear:bothを使用してフローティング要素をクリアする方が便利であるため、私は通常、それを宗教的に行わないことになります。

しかし、 LESSとSASSは、両方の世界を最大限に活用するための興味深い機会を生み出すと思います。なぜなら、スタイルを説明するミックスインと関数を持ちながら、必要な「スタイル」を含めるだけで意味的に正しい名前を付けることができるからです。

このHTMLとCSSを使用する代わりに

<div class="navigation roundedcorners">...</div>
.roundedcorners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

SASSを使用してこのミックスインを作成できます。

=rounded-corners
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

.navigation次のようにクラスに含めます。

.navigation
  +rounded-corners-5px

これにより、HTMLが次のようになります。

<div class="navigation">...</div>

したがって、異なる要素間でスタイルを共有する便利な方法を持ちながら、意味的に正しい名前を持つという利点があります。

score 6 · Accepted Answer

アンドリュー; あなたとそのプロジェクトに取り組んでいる仲間のメンバーにとって理解しやすいクラスとIDにわかりやすい名前を付けるのは良いことです。私にとって、クラス、、smallなどは私には何も定義しません。なぜなら、クラスセンターを指定すると、その中心に要素があることを示しますが、そのクラスには他のプロパティもあるからです。centerfloatleftlike color, background etc

例えば

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

この例では、クラスcenterは私にはわかりません。ただし、ヘルパークラスとして使用できます。

例えば

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

上記の例から、その中でのクラスの役割が明確になりましcenterたpanel div

詳細については、これらのリンクを確認してください：

CSSとHTMLでIDとクラスに名前を付ける最良の方法は何ですか？

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names

score 6 · Accepted Answer

スタイルの使い方にもよると思います。

スタイルは変更される可能性がありますが、コンテンツは同じままである可能性が高いため、コンテンツにはそれに応じた名前を付ける必要があります。

たとえば、div株式情報を含むを持っている場合は、のdivような名前を付ける必要がありますdiv class="stockInfo"。これにより、プレゼンテーションに関係なく、スタイルを変更でき、名前がそれらのスタイルと矛盾しないようになります（に名前を付けてdiv div class="yellow"から変更するのとは対照的です）。background-color赤に）。

ただし、「ヘルパースタイル」があり、それらの機能にちなんで名前を付ける必要があります。

たとえば、<br />いくつかのフロートをクリアするためにを使用したい場合があります。この場合、名前を付け<br class="clear" />てスタイルを付けるのは完全に合理的ですbr {clear:both;}。

繰り返しになりますが、ほとんどのWebサイトfloatは画像を右または左に配置しています。これを支援するために、スタイルを設定<img class="right" src="" />してから一致させることができます。<img class="left" src="" />img.right {float:right;}

したがって、使用法によって異なります。

score 4 · Accepted Answer

あなたの質問が：

表示情報がHTMLに忍び寄ることを意味する場合でも、CSSでの繰り返しを避けるために、添付されたスタイルに基づいて要素をグループ化することをお勧めしますか？

それなら、私のフラットな答えは、現実の世界では、セマンティックとプレゼンテーションがすべてではないということです。だから私の答えは次のようになります：それは異なります。

...帯域幅が重要かどうかによって異なります...1時間あたりの訪問者が多いサイトでは、クラス名は意味のあるものではなく、単に「c11」のようなものにすることもできます（そうです、私はそれを見ました）。名前。

...ルックアンドフィールが変更されると、コードも変更されることを完全に知っているかどうかにも依存します。（例：今日XHTMLでサイトを再設計しますが、2年後にCSSを再実行する場合は、マークアップをHTML5にする必要があることを完全に知っているので、とにかく構造を大幅に変更します。 ..）

...配達がすでに3日遅れているかどうかによっても異なります。あなたが3日遅れると、私を信じてください。セマンティックについてまっすぐに考える時間がなくなったので、「nopadding」のようなクラス名が表示され始めます（クライアントもそうしません）。

非常に多くのことに依存します、私は言うでしょう...それはあなたの質問の私の「現実の」視点です。

score 3 · Accepted Answer

ドキュメントにわかりやすいクラス名を追加することは、それほど大きな問題ではないと思います。純粋にセマンティックであるかカスケードに依存しているものとは対照的に、「floatleft」のような明示的なクラス名を使用する方が簡単だと思います。通常、頭の中にドキュメント構造がない後の開発者にとっても簡単です。それらをすべてに使用する必要はありませんli。左フロートメニューのすべてにfloatleftのクラスを追加する必要はありませんが、特定のことを行う必要がある場合は、これらの種類のスタイルが非常に適しています。以上の要素があり、他の開発者に自分がそれを行ったことを認識させたい場合。入れたり、入れ<div class="clear">たりするようなものです<div style="clear:both;">：おそらく最もきれいではありませんが、あなたが何をしているのかは明らかです。私の経験則は次のとおりです。考えを少なくする必要があるものは何でも、それを実行します。編集：上記のコメントで述べたように、これは、クリアリングとフロートを参照するクラス、つまり、純粋に表現的で非セマンティックでありながら、HTMLで参照する必要があるクラスに最も当てはまります。この場合、floatをセマンティック要素に強制的にアタッチするのではなく、floatleftのような純粋にプレゼンテーションクラスを使用していることを示すことが実際に望ましいと思います。

score 3 · Accepted Answer

私が見てきたことから、開発者は、あまりにも多くの不要なクラスと余分なマークアップでHTMLページをオーバーロードする傾向があります。これらのクラスは、ページサイズを大きくする（したがって読み込み時間を長くする）だけでなく、ページを混雑させ、後で管理および変更することを困難にします。

centerユーザーが入力した表示テキスト（フォーラムへの投稿など）を処理する場合に役立つ可能性がありfloat-leftますが、一般的なマークアップの目的では、適切なクラスに追加する方がよいでしょtext-align: centerうfloat: left。これは、HTMLをあまり変更せずにサイトの外観を変更しようとしている場合に特に役立ちます。テンプレートへのハードコーディングが少なければ少ないほど、テンプレートを変更するときにCSSを変更するだけで済みます。そのビットだけでも私には価値があります。

一般的な経験則として、実際には、コンテンツがどこにどのように表示されているかではなく、コンテンツが何であるかを説明する場合にのみ要素クラスを指定する必要があります。つまり、の代わりに。<span class="movie-information"><span class="bold">

必要のないときに要素にクラスを与えることが理にかなっていると私が感じるのは、検索エンジン最適化に関心がある場合だけです。適切なクラスを追加することが実際に検索エンジンにどのように役立つかを知りたい場合は、 Microformatsを必ず読んでください。そうは言っても、ページが視覚的にどのように表示されるかを説明するクラスを追加しても、検索エンジンには何の効果もありません。

クラスを「グループ化」するのは、同じものを表示している場合、または兄弟である場合のみです。ページ全体の要素を一緒に定義すると、CSSが非常に乱雑になります。クラスを組み合わせて数行節約するよりも、後で見つけられるようにスタイルシートでクラスをグループ化する方がはるかに優れています。

score 3 · Accepted Answer

これは、Webテクノロジーの古いものと新しいものが出会う場所だと思います。過去から、優れたWebエクスペリエンスを目立たないようにレンダリングすることは困難でした。これらのクラス名は、Webサイトがコードを理解するのを助けるためにWebマスターを変更するときに主に役立ちました。それはその原因をうまく果たしましたが、この時代の新しいテクノロジーでは、これはゆっくりと消滅しつつあると思います-実際、それは死んでいるはずです。

私たちが尋ねるべき質問は、「テンプレートとして渡すことができるすべての新しい革新的なデザインのために新しいクラスを作成する必要がありますか？」です。そうは思わない。サイトのマークアップは、それが意味することを実行する必要があります-マークアップ。マークアップで使用されるクラス名は、外観ではなくコンテンツを説明するものである必要があります。一方、スタイルシートは、マークアップの情報に基づいてドキュメント上の要素を選択し、スタイルを設定できる必要があります。

これをRailsアソシエーションの命名規則に関連付けたいと思います。このことを考慮...

class Post < ActiveRecord::Base
    has_one  :personifyable
    has_many :personifications, :through => :personifyable
    has_many :taggables
    has_many :tags, :through => taggables
    belongs_to :destroyers
end

明らかに、これは実際のモデルではありません。それは私がポイントを動かすために使っているものです。深くネストされた依存関係の場合を考えてみましょう。これらの名前はばかげたものになります-まだない場合（つまり、CSS<div class='mediumwidth floatright centeredtext graytheme master'></div>など）

ここで、異なる原則がある場合を考えてみましょう。開発者や設計者が異なれば、「最も確実に」ではないにしても、特定の命名規則を使用する理由が異なる場合があります。これはリファクタリング時間にどのように影響しますか。それはあなたの想像に任せます。また、ビジネスパートナーがトラフィックを引き付けるサイトテーマの新しいトレンドに気付いた場合（より技術的には、このビジネスパートナーが実験的なA / Bテストを実行し、いくつかの仕様を考え出したと仮定します）、コンテンツの内容を変更したくない場合この新しいスタイルを実装するためのスタック全体（つまり、HTMLとCSS、場合によってはJSページ）。

結論として、スタイリングのヒントをマークアップに含めないでください。目立たないようにドキュメントを操作して、スタイルを設定したり操作したりします。Sassは、CSSにマークアップをモックさせながら、サイトをスタイリングする優れた方法を提供します。jQueryはもう1つの素晴らしいUJSライブラリです。HTML5は、マークアップをより柔軟にし、CSSとJSにより多くの情報を提供するメソッドも提供します。

score 3 · Accepted Answer

私はプログラマーの前の開発者なので、UtilityMethodの一種として「floatleft」cssクラスのようなものを使用します。
つまり、私のcssクラスは「floatleft」です...そしてそれがそのクラスのすべてです。ですから、<div class="floatleft"></div>「このdivを左にフロートさせる」ということを頭の中で言うと。
したがって、そのDivにも青い背景が必要であり、それが私のメインヘッダーである場合、そのDivには別のクラスがあり、最終的には<div class="mainheader floatleft"></div>

このようにすることで、リファクタリングの問題も回避できます。後でデザインを変更する場合、「floatleft」は常に物事を左に浮かせ、それ以上のものは何もないことがわかります。

score 2 · Accepted Answer

結局のところ、それはあなたにとって何がうまくいくかということだと思います。クラス名がその機能を説明している場合、それはマークアップをスタイルから分離するという規則に実際には反しません。考慮すべきもう1つの要素は、あなたが唯一の開発者なのか、それともチームの一員なのかということです。チームの一員である場合、またはコードが後で他の開発者によって処理されることがわかっている場合は、使用される命名規則を確立して文書化する必要があります。

私は現在、いくつかの非常に大規模なプロジェクトでDown Jonesと契約しています。キャメルケース、ダッシュ、アンダースコアをいつ使用するか、クラス名に基づく特定のプレフィックスなど、クラスの命名規則に関するかなり長いドキュメントがあります。私たちが取り組んでいるプロジェクトについて。クレイジーに聞こえますが、同時に12人ほどのフロントエンド開発者が作業している場合、それは命の恩人です！

score 1 · Accepted Answer

あなたはこのようなことを言っています：

.red
{
    color:red;
}

したがって、このクラスを使用するには、次のようにします。

<ul>
<li class="red">hello</li>
</li>

代替ソリューション

ul li
{
    color:red;
}

使用法：

<ul>
    <li>Hello</li>
</ul>

これにより、実際にコンテンツからプレゼンテーション情報を削除できます。

score 1 · Accepted Answer

私は個人的に彼らがやろうとしていることに近いものに名前を付けます。画像ギャラリーにあるクラスがあり、その主に最もよく使用されるクラスは「ギャラリー」のようなものになるか、より装飾的なものの周囲に境界線を設定する場合は、「decoborder」という名前を付けます。。私はそれらを半短くし、それらが提供するタスクにいくらか関連するようにしています。「小さい、大きい、H1に下線が引かれている」など、他のタグや関数を模倣できるようなことは、混乱を招く可能性があるため、好きではありません。それを超えて、あなたは本当にあなたにとって最も意味のある方法でそれに名前を付けるべきだと思います。

score 1 · Accepted Answer

質問が命名の1つだけである場合、1つの特定のクラスについて...

class="floatleft"

また

class="myClass"

また

class="gibberish"

....まったく何も変更しません。それらは異なるクラス名にすぎません。プログラミングは同じように機能します。

コンテンツとプレゼンテーションが分離されているか、名前の作成方法に関係なく完全に分離されていないかのどちらかです。

score 1 · Accepted Answer

価値のあることですが、私が正しく覚えていればclass、HTMLのキーワードは現在CSSスタイルシート以外には使用されていません。したがって、あなたが提供した例は...

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>

...実際にはデータを識別する方法ではありません。HTMLタグ内のデータを本当に識別したい場合は、nameまたは属性のいずれかをお勧めします。id（どちらも使用法が少し異なります。name通常、サーバー側のクエリに使用されますidが、スタイルを設定でき、一般的に汎用性があります。IDは一意である必要がありますが、名前は一意である必要はありません。）W3CHTMLを使用して詳細なドキュメントを確認できます。仕様。

つまり、タグクラスを介してコンテンツをプレゼンテーションに結び付けることについて心配する必要はありません。それらが他の何かに特に使用されるまで、それらはあなたの生のコンテンツに実際の影響を与えることはありません。そのため、意味がある限り、クラスには好きな名前を付けてください。個人的には、論理的な名前付けとスタイルタイプの名前付け（たとえば、クラス「graybgfloatleft」の代わりにクラス名「editorcomment」など）の側で誤りを犯しますが、最終的には、クラス名がIDや名前のようなプレゼンテーションへのデータ。

幸運を。

score 1 · Accepted Answer

私は両方を実行しましたが、今日は非表示のクラス名を使用することに傾倒していると言わざるを得ません。OOCSS https://github.com/stubbornella/oocss/wikiと呼ばれるこの気の利いたフレームワークを見つけました。これは、Webアプリケーションの新しいレイアウトを作成するときに非常に役立ち、要件に非常によく適合しました。

これは主に、多くのコンテンツを処理する必要がある場合に、間隔、ヘッダー、およびテキストの基本クラスの定義が非常にうまく機能するためです。どこでも同じクラスを使用するため、レイアウトが改善され、保守しやすくなります。

オフコースこれは、htmlの要素が次のように見えることを意味します。<div class="unit size1of3 lastUnit">しかし、HTMLとは何かということではありませんか？あなたの情報が適切に提示されていることを確認してください。

私は全体の再設計の点に同意しません、正直なところ、あなたがあなたのウェブサイトを再設計しなければならないとき、ほとんどのCSSはとにかく戸外に出ます。また、CSSを間隔/見出し/テキストの適切なクラスに分割することで、CSSルールが競合して混乱する可能性が低くなります。ul li div{}

オフコースでは、クラスはコンテンツを記述しませんが、CSSはクラスの継承を許可せず、IE6のような古いテクノロジーをサポートする必要があるため...それは本当に重要ですか？そして、動物やアヒルのようなクラス名は本当により良いhtmlになりますか？HTMLはブラウザ用であり、ブラウザがそれをレンダリングするとき、それは人間用だと思います。

score 0 · Accepted Answer

場合によっては、要素をフロートさせるためにクラスを追加するだけで意味がある場合もあります。セマンティックアプローチの問題は、cssクラスの大きな泥だんごになってしまうことです。もちろん、redLinkやblackHeaderのような名前は禁止する必要がありますが、「clear」や「floatLeft」のような小さなヘルパーが必要になる場合があります。

これを深く説明しているニコール・サリバンのこの記事を読んでください。

score 0 · Accepted Answer

これらの議論から完全に取り残されていると私が感じることが2つあります。1つ目は、すべてセマンティックになりたい、またはすべてになりたくない理由です。キーワードはブランディングとスキニングです。ブランディングとスキニングが100万年以内に資金を調達することは決してない、いくつかの内部の部門のWebサイトで作業する場合、プレゼンテーションのクラス名は正当化される可能性があります。一方、自動車メーカーやデパートなどの顧客対応サイトは、発売されるすべての新製品がWebサイトのまったく新しいスキンになる世界に住んでいます。新しい色、新しいレイアウト、新しい背景画像、そしてこれらすべては、純粋にcssで変更を加えることができるはずのデザイナーによってリードされているため、動作中のphp（またはwhat-have-you）を壊す可能性はありません。複数のスキンがあるブランドサイトもあります。同時に。その要件のあるサイトでは、視覚的な変更がhtmlに影響を与えることはできません。そうしないと、他のすべてのブランドを壊して、そのうちの1つを更新することになります。このような状況では、セマンティッククラス名が必要です。

しばしば取り残される2番目のことは、次のように、セマンティッククラス名によって作成されたプロパティのグループを繰り返す問題に対処する方法です。

.content-nav {
    float: left;
    margin-right: 10px;
    background-color: #ccc;
}

.content-nav .user-photo {
    float: left;
    margin-right: 10px;
    border: solid 1px #000;
}

.content-nav .user-display-name {
    float: left;
    margin-right: 10px;
    text-decoration: underline;
}

これはセマンティックネームの欠点だとよく言われますが、それは妥当な点だと思います。一方、LESSやSASSなど、セマンティックcssDRYを維持するのに役立つツールがあることを指摘したいと思います。他のコメント投稿者が上記でこれについて言及しているのを見ましたが、この点を強調する価値があると思いました。

html - 添付されたスタイルを直接説明する「floatleft」のようなcssクラス名は避けるべきですか？

20 に答える 20

Related

Reference