CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
CSSの新しい疑似クラス関数「:is()」が便利すぎるので紹介します。 :is()については、以前の記事で紹介した時はプレビュー版のみのサポートでしたが、ブラウザのサポートも進み、来年には普通に使用できるようになるかもしれません。 画像はツイートより 元ツイートは、こちら。 How slick :is(this CSS!?) 😏 removes the margins on all headers with a .tight class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 } pic.twitter.com/y01f7uKPmA — Adam Argyle (@argyleink) October 13, 2020 ツイートは、hx要素のマージンをまとめて削除するスタイルシートが紹介されています。
兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎます。たった3行のCSSで積み重ねる時のマージンを管理できる、フクロウセレクタの効果的な使い方を紹介します。 このテクニックは、テキストとテキスト、見出し直後のテキスト、流動的なフォントサイズにも非常に効果的です。 My favourite 3 lines of CSS by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのカスタムプロパティでのフォールバック値の仕組み The Stackではなく.flowを使うのなぜですか？ gapではなく、marginを使うのなぜですか？ 終わり
先日、 ブラウザ君「ワイはCSSのセレクタを右から読むんや」 という記事を読みまして、ちょっと気になったので後で確かめようと思っていたのですが、なんとなくそのままになってしまいやや旬を逃した感がありつつ、ツッコミを入れてみようと思います。 なお『ワイ「ほげほげ」』みたいな形式は使いません1。恥ずかしいので。 私は仕事でChromiumのソースコードをよく読んでいるので、ChromiumのソースコードからCSSの処理を見つけて、それを基準にして解説しようと思います2。そのため、他のブラウザのレンダリングエンジンと異なる最適化が施されている可能性があります。また、現在のソースコードがそうでも、将来的に別の方法に変更される可能性もあります。あくまで、ブラウザの処理の一例であることをご了承ください。 ChromiumはC++で開発されていて、私もC++畑の猫ですが、今回の記事は随所にリンクを挿入し
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレクタを1つにまとめられて便利ですが、セレクタの末尾に使用すると、予想よりも多くの一致が発生するかもしれません。どんな場合にそうなるのかを紹介します。 たとえば、下記の.a .b .cと.a :is (.b . c)は同じように見えるかもしれませんが、実は異なります。 Using :is() in complex selectors selects more than you might initially think by Bramus CSSの:is()疑似クラスやセレクタの読む順番について詳しくは、以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:wher
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSの新しい疑似クラス関数「:is()」複数のセレクタを1つにまとめることができて、これは便利
CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
ブラウザはCSSのセレクタを右から読む、ほんまか？ - Qiita
CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる