CSS 【テクニカル・上級編】 属性セレクタの大文字小文字無視フラグ [attr=val i] – CSS実践ガイド
属性セレクタの「i」フラグ：ブラウザエンジンを読み解き、堅牢なCSSを設計するフロントエンドの戦場で長く生き残っていると、CSSの記述一つがどれほどシステムのメンテナンス性を左右するかを痛感するはずだ。「なんとなく動く」コードと、「ブラウザ...
基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）
CSS CSS 【テクニカル・上級編】 属性値ハイフンリストセレクタ [attr|=val] – CSS実践ガイド
属性セレクタの「隠れた実力」： がなぜ大規模アーキテクチャの武器になるのかフロントエンドの戦場において、我々は日々「いかにCSSの複雑性を抑え、保守性を最大化するか」という問いと格闘している。BEMの命名規則やCSS Modulesのハッシ...
CSS 【テクニカル・上級編】 属性値リストセレクタ [attr~=val] – CSS実践ガイド
属性セレクタの深淵：`` が秘めるアーキテクチャ上の合理性とコストフロントエンドのアーキテクチャを設計する際、多くのエンジニアは「クラス名」という名のラベル付けに過度な依存をしがちだ。しかし、CSSの真価は、DOMが持つ属性（Attribu...
CSS 【テクニカル・上級編】 :scope 擬似クラス – CSS実践ガイド
CSSの「スコープ」を支配する：`:scope` 擬似クラスの深淵とアーキテクチャへの応用Webアプリケーションの規模が巨大化するにつれ、我々フロントエンドエンジニアが直面するのは「セレクタの肥大化」と「DOM探索のコスト」という終わりのな...
CSS 【テクニカル・上級編】 :target 擬似クラス – CSS実践ガイド
`:target` 擬似クラスを使いこなす：ブラウザのネイティブ挙動を味方につけた「脱JavaScript」のアーキテクチャフロントエンド界隈では、ReactやVueといった強力なフレームワークが台頭し、状態管理といえばグローバルストアかコ...
CSS 【テクニカル・上級編】 :any-link 擬似クラス – CSS実践ガイド
モダンCSSの深淵：`:any-link` がもたらす「セレクタの純度」とアーキテクチャの最適化CSSを書くとき、私たちはしばしば「歴史的遺物」という名の負債と戦っている。かつてのWeb開発において、リンクのスタイルを定義しようとすれば、`...
CSS 【テクニカル・上級編】 :blank 擬似クラス（草案） – CSS実践ガイド
幻のセレクタ `:blank` と、我々が向き合うべき「空要素」の深淵CSSの仕様策定における「草案（Draft）」という言葉には、技術者としてのロマンと、現場運用者としての恐怖が同居している。今回掘り下げる `:blank` 擬似クラスは...
CSS 【テクニカル・上級編】 :empty 擬似クラス – CSS実践ガイド
`:empty` の深淵：その「空」は本当に空っぽか？CSSの `:empty` 擬似クラス。MDNを引けば「子要素を持たない要素を選択する」と書かれている。新人エンジニアは「おっ、中身が空の``を消すのに便利じゃん」と安直に使いがちだ。だ...
CSS 【テクニカル・上級編】 :not() 擬似クラス – CSS実践ガイド
否定擬似クラス `:not()` を極める：CSSアーキテクトが教える「除外」の美学と罠CSSの設計において、何を選択するかよりも「何を選択しないか」を制御する方が、複雑なUIを構築する上では重要になる。特に `:not()` 擬似クラスは...
CSS 【テクニカル・上級編】 :has() 擬似クラス（親セレクタ） – CSS実践ガイド
CSSの「聖杯」がついに手元に：`:has()` 擬似クラスを巡る、パフォーマンスとアーキテクチャの真実長年、CSSアーキテクトとしての我々が喉から手が出るほど欲していたもの。それは「子要素の状態に応じて親のスタイルを書き換える」という制御...