web-dev-qa-db-ja.com

特定のスタイルに一致する名前のCSSクラスを作成する理由（非セマンティッククラス名）

多くのクラスと単一のスタイルが1対1で対応するCSSフレームワークがいくつかあります。たとえば、 basscss の場合、「。inline-block」は「display：inline-block;」として定義されます。

1つの特定のスタイルに一致するクラスを作成することにはどのような利点がありますか？

このようなクラスの使用はインラインスタイルで置き換えることができ、保守性の点で違いはありません。

これは、「クラス」のポイント（つまり、「グループまたはカテゴリの体系的な配置」である分類）と矛盾していませんか？はい、3番のすべての番号のグループを作成できますが、それが意味を持つことはめったにありません。

明確にするために、bootstrapのすべてのクラスと意味がないわけではありません。たとえば、bascscssでは、 "rounded"は次のようなスタイル（border-radius：3px;）を記述します。グローバルに変更して新しいデザインに対応する（たとえば、4px）。

これは単に入力を減らすためですか（ "margin-bottom：0"の "mb0"の場合）、またはファイルサイズを減らします 明確さを犠牲にして ？

web-developmentcsssemanticsbootstrap
3
James K

.inline-block { display: inline; }のような一部のCSSクラスは一般的に無意味であることを指摘するのは正しいと思います。このようなクラスが引き続き使用される理由は3つあります。

  • 「ベストプラクティス」の貨物養殖。インラインスタイルの代わりにクラスを使用することが一般的に想定されているため、CSSクラスを使用してもメリットがない場合もあります。もちろん、これは悪い理由です。
  • 一部のコンテンツ管理システムは、HTMLクラスを処理できても、インラインスタイルを処理できない場合があります。
  • サイトのコンテンツセキュリティポリシー（CSP）でstyle-srcまたはdefault-srcを使用すると、インラインスタイルが無効になる場合があります。これは非常に良い理由です。
1
amon

特に理由はありません。ライブラリは自然にそのように成長しました。

Bootstrapなどのライブラリは、カスタムスタイリングがなくなることを約束していました。CSSコードの作成に何時間も費やす代わりに（およびInternet Explorer用に作成したCSSを調整するのに数日）、単にプロジェクトにライブラリを追加し、必要な場所にsemanticクラスを追加します。これには、簡単にカスタムテーマを追加できるなど、多くの利点があります。

これは、これらのライブラリに厳密に基づいている基本的なアプリケーション、つまり基本的な要素（ボタン、カルーセル、ポップオーバー、ページネーションなど）に適しています。ライブラリに含まれているalreadyより複雑なアプリケーションでは、物事はより複雑になったため、CSSを作成することになり、それを行うと、ライブラリのいくつかの利点が失われます。

したがって、クラスの形式で必要なスタイルを追加することは論理的でした。スクロールを防ぐことができる必要がありますか？ Bootstrap has a solution for that。それは他の何十もの同様のシナリオに対するソリューションを持っているので、「これ以上カスタムCSSはない」という約束を守ります。

1
Arseni Mourzenko