!important
https://gyazo.com/5f4bca3ce5b1cb6b63d0614c2520d917
CSSでこれを記述すると、スタイルの変更を強制することができる。 code:example.css
.foo {
font-size: 16px !important;
}
あまり使うべきではないと思うMijinko_SD.icon
他のスタイルで打ち消すのが面倒になる
!importantを修正しなければならなくなることが多い。
修正できない（しにくい）場合もある
修正できないと、自分のページ上で個人的に用意したUserCSSを使うことができずに困ることがある
!important ルールがスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には !important は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然のカスケードを破壊するためデバッグが難しくなるので、 !important を使用することは悪い習慣であり、使用を避けるべきです。 （中略）
!important を考える前に、常に詳細度を使用する方法を探しましょう。
逆に使うべき時
絶対に適用されて欲しい時
記法を追加して背景色と文字色を変えた
→ どちらか片方を変えられてしまうと表示がおかしくなってしまうので困る
困るからと言って!importantで押しつけ強制すべきではないと思うMijinko_SD.icon
メンテナンスコストを下げたい時
自分のページのUserCSSが、SettingsのUserCSS(ProjectCSS)によって不意に変更されるのを防ぎたい等 セレクタの詳細度を上げるだけではどうしようもない時
htmlのタグ自身にstyle属性がある場合
CSSセレクタの優先順位.icon
!importantを!importantで潰し合う様はまるで核戦争 核兵器扱いは草takker.icon
UserCSSの場合、大抵は要素セレクタをつければ!importantは不要になるMijinko_SD.icon .lineをdiv.lineに置き換えるとか
ScrapboxのCSS(app.css)のセレクタはほとんどがクラス名のみ(or 要素名のみ)で書かれている UserCSSの場合は元々の構造を無視して暴力的に上書きしているのだから、むしろ!importantを使うべきなのかと思っていたblu3mo.icon
（UserCSSが元のCSSを上書きする理由は「より詳細だから」ではないので）
どちらが良いんだろう..?
あ、UserCSSで使う場合を考えているのか
UserCSS内で1つの要素に対して複数個importantを使いたいこともないだろうしimportantで解決してもいいかも
「app.css」->「Settings」->「自分のページ」という順でスタイルの上書きがされることがあるので、Settingsに置くUserCSSは!importantがない方が親切かなと思っていますMijinko_SD.icon
この理屈でいくと、自分のページの!importantを使ったCSSはSettingsに移植できなくなるのか
詳細度をちまちま計算or比較しないといけないのもうーんという気がしてしまうyosider.icon
他の記述の詳細度を確認しにいかないといけない
仕方ないのだろうか
詳細度ごとに記述をグループ分けしておくという手はある？
グローバル変数とローカル変数みたいな
詳細度を直接数字で指定するとどうか
今まで自然にいい感じになっていたのが面倒になるだけか
でもz-index(レイヤーの表示順)は数値指定なんだよなーMijinko_SD.icon
それを数値でどうにかしてるなら、詳細度も数値指定できていいような気がしなくもない
わざわざ計算しなくても、ブラウザの開発者ツールを使えば一発でわかりますMijinko_SD.icon
https://gyazo.com/ef4c2d68d16d7611cf82b3c47306c142
右側のスタイルタブでは詳細度が高いものほど上に表示されている
なるほどyosider.icontakker.icon
これ便利だけどclassを動的に生成している場合はデプロイごとに切り替わってしまうmtane0412.icon
この動的生成もCSSのグローバル地獄を解消するためだと思うとCSSはなんと罪深いことか
TwitchがまさにそうなんだけどTwitchはさらに!important使いまくってて最悪である 内部値があるというだけでもめんどくささが増している気がするMijinko_SD.iconyosider.icon
もっといい方法はなかったのだろうか…
詳細度を変えるために、詳細度を変えるためにある記述(!important)ではなく、要素セレクタを加えるという一見直感的でない記述によって対処しないといけないという点も違和感yosider.icon
でも「詳細にする」という意味では重要です！と言うよりもセレクタを詳細にするほうが直感的か
優先順位を上げたいと思っている人にとっては!importantのほうが直感的かも
単純に下に書いたスタイルが優先されるんでいいじゃん…とは思ってるMijinko_SD.icon
たしかにyosider.icon
CSSの仕様はごちゃごちゃしすぎててめんどくさい
ググりづらい基素.icon
開発環境が「今定義したやつとぶつかる指定があるけど、どっちを優先する？ちなみにデフォルトだと詳細度を元にこっちを優先するので、それでいいなら何も操作しなくていいよ！」とやってくれるのが理想だと思うwnishio.icon
字面がちょっと面白いsta.icon
「インポータント！」みたいな
「我重要ぞ！」Mijinko_SD.icon
安直すぎんかって感じが面白い
CSSを設計する立場の人は使うべきではないmtane0412.icon
設計者とは別に後から追加する場合
DOMを操作できるならidやclassを使うべき
DOM操作もできない場合で確実にスタイルを上書きしたい場合は使う
スタイル衝突する可能性を許容するなら使わない
!important衝突が起きるなら設計者がおかしい
たくさんの人がCSS追加する状況って結構面白いんだな
一般論で考えると追加する人たちできちんと足並み揃えろと言われそう
CSS co-designer here.
!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.
Anything else is probably misuse, and a sign you may not understand the cascade properly.
Google翻訳:
CSS の共同デザイナーです。
!important が追加された理由はただ 1 つ、米国の法律で特定のテキストを特定のフォント サイズにする必要があるためです。!important はカスケードによる変更を阻止します。
それ以外の場合はおそらく誤用であり、カスケードを正しく理解していない可能性があります。
米国の法的な文書では特定のフォントサイズを使用することが義務付けられており、CSSの !important はそれを遵守するために誕生したらしい @stevenpemberton 草.iconbsahd.icon
userchrome.css.iconだとほとんどの場合これを使わないと適用されないbsahd.icon
ダブル!imporant早く実装して