CSSの詳細度をうまく操る - ワザノバ | wazanova

http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Harry Robertsがブログで、CSSのプロジェクトをうまくスケールさせるためには、詳細度の影響をうまく抑えて、メンテナンス性を高めることがポイントだと解説しています。 どれだけ思慮深くソースの順や継承関係を整理しても、詳細度がトリガーになった上書き起きると、それまでの努力が台無しになる。詳細度のタチが悪いのはオプトアウトできないこと。 であるが、その悪影響をうまくコントロールする策としては、 CSSにおいてセレクタとしてIDは使わないこと。クラスを使うことを上回るメリットはない。そもそも、IDでできることはクラスで

[masuP]

普通に書いても結構ネストする感じだったけど、Sass使い始めて一層ネストが深くなった。ネスト深いとメンテしにくいのだろうか。

[yamadar]

セレクタの重み付けから見るCSS設計。

[Falky]

メンテ性のためにSassやLESSでネスト使うので、同時に詳細度も気にするなんて無理ゲー。一方、今は各ブラウザのインスペクタが優秀だから、!importantのデバッグは超簡単。無理して避ける必要はなくなってると思う。

[kasumani]

CSSの詳細度をうまく操る Harry Robertsがブログで、CSSのプロジェクトをうまくスケールさせるためには、詳細度の影響をうまく抑えて、メンテナンス性を高めることがポイントだと解説しています。 Tags: feedly, ifttt, recently read,

[kuroaka1871]

ネスト注意

[gmsniper2]

うーん、なんか神経質すぎねえかこれ。そんなシビアにコンセンサス取りながら進める案件ならドキュメント書くし、見ながら作業するでしょうと思うし、その手間惜しんだら大沼よろしく大炎上しそうだけど。

[ama-ch]

Sassのレビューするときの一言目は大体「ネストやめましょう」

[nibushibu]

idは百害あって一利なし

[hidex7777]

csslint使えばいい　設定ファイルを共有して

[minetty99]

Sassすら書くの面倒くさいから、明らかに使い回しする部分は!important付きのクラス複数当てで逃げてるなー

[otchy210]

#id の代わりに id="id" とか、.cls.cls とかバッドノウハウ臭しかしないなぁ。この "微調整" のメンテ地獄と、!important のメンテ地獄は同レベルなのでは？

[wdr_s]

「CSSにおいてセレクタとしてIDは使わないこと」このまえ自分の設計したCSSの構造がダメすぎて痛感した。

[escape_artist]

結局はCSSも開放/閉鎖原則だと思う。

[ngyuki]

.btn.btn みたいなのはさすがに見たことがないけどありなのだろうか

[AyeBee_TY]

なるほど、これは、参考にする機会はあまり出会いたくないけど参考になった。でも、!importantで強制するのと.btn.btnで詳細度を上げるのではとっちが可読性が高いか微妙。これは使い分けの問題なんかな。

[hisasann]

詳細度

[torounit]

CSS設計はマジでカオス

[n314]

.btn.btn ってアリなのか。バッドノウハウでなければいいが。

[Ashizawa]

このように

[ko-ya-ma]

>CSSにおいてIDを使うべきというケースはない

[shibuyads]

おっさん // CSSの詳細度をうまく操る - ワザノバ | wazanova

[closer]

そもそもcssの詳細度の設計がテキトー過ぎんだよな。かといって後方互換考えると仕様変更は難しい

[ysk_lucky-star]

最後のは可読性を無視したやり方だけど、最低最悪の場合で限定すればアリなのかも

[akiyoshi83]

同じクラス名を続けて詳細度を調整する発想はなかった。

[toaruR]

俺はネストはハッキリ書いた方が保守性上がる派。もしくはscss。

[yohshiy]

CSS を書く際の注意点など。

[monoooki]

属性セレクタへの変換…そんな手があるのか（多分使わない

[pivotdgdg]

CSSの詳細度に注意する。

[kussun]

詳細度の観点から、セレクタにIDは使わずクラスを多用すべきという話。定期的にこの話見かけるな。