CSS 【実務・中級編】 一般兄弟結合子 (~) – CSS実践ガイド
CSSの「一般兄弟結合子（~）」を使いこなす：DOMの依存関係を最小化する設計術現場でコードをレビューしていると、不必要に「クラス付け」を乱発しているケースをよく見かけます。特に兄弟要素に対してスタイルを当てる際、JSでクラスを付け替えたり...
CSS
CSS CSS 【実務・中級編】 隣接兄弟結合子 (+) – CSS実践ガイド
CSSの「隣接兄弟結合子（+）」を使いこなす：現場で差がつく余白管理の極意やあ。日々のコーディング、お疲れ様。CSSを書いていて「この要素、前の要素と隣り合っている時だけ余白を詰めたいんだけど、いちいちクラスを当てるのは面倒だな」と感じたこ...
CSS 【実務・中級編】 子結合子 (>) – CSS実践ガイド
CSSの「子結合子（>）」を制する者は、カスケードの混沌を制す現場でコードを読んでいると、CSSのセレクタが際限なく肥大化して、どこで何が上書きされているのか分からなくなる……そんな経験はないだろうか？「とにかく動けばいい」と適当なセレクタ...
CSS 【実務・中級編】 子孫結合子 (スペース) – CSS実践ガイド
「とりあえずスペース」でCSSを書いていないか？子孫結合子の深淵と、シニアが教える「守るべき境界線」やあ。現場でCSSと格闘している諸君、お疲れ様。CSSを書き始めた頃、誰もが最初に覚えるのが「子孫結合子（Descendant Combin...
CSS 【実務・中級編】 IDセレクタ (#) – CSS実践ガイド
CSSの「禁じ手」を知る：IDセレクタと付き合うためのエンジニアリング的思考フロントエンドの現場で数年揉まれてくると、一度は耳にするはずだ。「CSSでIDセレクタは使うな」という教条。正直に言おう。この言葉は半分正解だが、半分は教条主義に過...
CSS 【実務・中級編】 クラスセレクタ (.) – CSS実践ガイド
CSSの「クラスセレクタ」を極める：なぜ私たちはIDを捨て、クラスに魂を込めるのかフロントエンドの現場で「CSSが効かない」「意図しないスタイルが上書きされる」という泥沼にハマった経験、一度はあるはずだ。その原因の多くは、セレクタの設計思想...
CSS 【実務・中級編】 タイプセレクタ (要素型セレクタ) – CSS実践ガイド
タイプセレクタの深淵：なぜ「基本」こそが最も危険なのかやあ。今日はCSSの原点にして、大規模開発の現場でしばしば「諸刃の剣」となるタイプセレクタ（要素型セレクタ）について話をしよう。`div`, `p`, `h1`……誰もが最初に覚えるこの...
CSS 【実務・中級編】 ユニバーサルセレクタ (*) – CSS実践ガイド
CSSの「ワイルドカード」とどう付き合うか：ユニバーサルセレクタ `` の正しき使い道フロントエンド開発の現場で、CSSを書き始めた頃に誰もが一度は通る道、それがユニバーサルセレクタ `` です。「とりあえず全要素をリセットしておけば安心」...
CSS 【実務・中級編】 BEM等の命名規則と詳細度管理 – CSS実践ガイド
CSS詳細度の泥沼から抜け出せ：BEMとフラットな設計が「強いコード」を作る理由フロントエンドの現場で長く戦っていると、一度は必ず「CSSの修正が効かない」「予期せぬ場所でスタイルが壊れた」という悪夢に遭遇するはずだ。その原因のほとんどは、...
CSS 【実務・中級編】 リセットCSSとノーマライズCSSの優先順位戦略 – CSS実践ガイド
CSSのリセット戦略：ブラウザの「お節介」とどう付き合うか現場でコードを書いていて、こんな経験はないだろうか。「リセットCSSを読み込んでいるのに、なぜか自分の書いたスタイルが意図通りに当たらない」「詳細度（Specificity）の計算に...