web-dev-qa-db-ja.com

CSSに名前空間を付ける方法は？

私が知る限り、CSSネームスペースには2つのタイプがあります。

プレフィックス1：

.myapp-alert {...}

そしてクラス1：

.myapp .alert {...}

どちらが望ましいですか？ 1つは他のものよりも利点がありますか？他にありますか？

css
9
Runnick

CSSには名前空間はありません。 CSSで行うことはすべて、グローバルスコープになります。これは仕様によるものです。

これにより、2つの問題が発生します。

  • ライブラリで特定のスタイルを導入すると、ライブラリを使用しているアプリはどうなりますか？

  • 作業している部分に特定のスタイルを導入すると、100M-LOCアプリの他の部分はどうなりますか？

これらは2つの異なる状況であり、質問で説明した2つの異なる手法で処理できます。

Prefixesは、ライブラリとフレームワークに適しています。フレームワークに警告アイコンがある場合、このアイコンはページのどこにでも表示される可能性があります。したがって、（class/idセレクターを介して）スタイルのスコープを特定の要素に限定することはできません。これは、実際、次のようなセレクターにつながります。

.my-awesome-framework-icons-alert { ... }

ところで、衝突を回避するためには、接頭辞の選択が重要です。人気のあるライブラリとフレームワークは、小さなプレフィックスを使用できます。それらを使用するWebサイトは自分自身に適応することがわかっています。たとえば、AngularJSを使用するWebサイトでは、カスタム要素にng-プレフィックスを使用しない可能性があります。一方、小さなライブラリは、既存のプロジェクト内に簡単に統合したい場合は、より難解な名前を使用する方がよいでしょう。

Containersは、一方で、アプリコンポーネントに適しています。 Aboutページのすべてのスタイルの前にabout-page-を付けたくありません。むしろ要素<div id="about">を作成し、Aboutページでのみ使用されるスタイルのスコープとして使用します。

LESSなどのCSSプリプロセッサを使用すると、このようなコードにより、プレフィックスと比較して多くの重複が回避されます。私は単に行います：

#about {
    .contact { ... }
    .map { ... }
    ...
}

そして、プリプロセッサにすべての関連するスタイルについて#aboutを複製させます。

14
Arseni Mourzenko

BEM（ブロック要素修飾子）を使用して、他の言語で名前空間が解決するCSSの問題を解決します。 http://getbem.com/introduction/

1
Andreas Warberg