1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Polymer スタイルモジュールを読み込む際の注意点

Posted at

スタイルモジュール(<style include="xxx">)を使用する際の注意点です。

問題

複数のスタイルモジュールを読み込んだ場合、モジュール間で競合するスタイル情報があると後に指定したモジュールのスタイルが適用されます。

例えば、<style include="style-module-x style-module-y style-module-z">でモジュール間で競合するスタイルがあると、x=>y=>zの順に適用されます。

つまり、モジュールを読み込む順番によって意図しないスタイルが適用されてしまう可能性があります。

対策

スタイルモジュールを定義する際はセレクタの抽象度に注意し、読み込むときも抽象性の高いモジュールから順番に読み込むようにします。(例:アプリケーションのテーマ=>フォームの共通スタイル=>ボタン)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?