さわらブログ

さわら（@xhiroga）の技術ブログ

書評 - 知らないと損するCSS

TL;DR

  • フロントエンドの専門家ではないが、コーディングを担当することになった人間に有効
  • 知らないプロパティの紹介、標準のCSSでこんなことができるのか、という驚きがある
  • CSS Custom Propertiesのそこそこ詳しめの紹介
  • CSS Grid Layout に関する参考サイトがとても分かりやすい。

はじめに

知らないと損するCSS をBOOTHで購入して読みました。

booth.pm

業務の関係でReactを触ることになったものの、フロントエンドのCSSの知識が欠けていたのでキャッチアップを目的としていました。
特に CSS Custom Properties と Grid Layoutについての触りの解説を求めており、この本はその要求を満たしてくれました。

※ React Nativeの経験があったので、 FlexBoxについてはなんとなく理解していた。

内容紹介

CSS Custom Properties

CSS Custom Properties について学べたのが良かったです。
RFCを読むとShadow DOMが関係するらしいですが、WebComponentの世界のことが分からないので意味がわからず...
立地なアプリケーションを組み立てるための文脈から要求された機能だと思っておけば良さそうです。

変数のScopeについて知れたのが特に嬉しく、職場のソースコードで見た root: の意味がようやく分かりました（それまでCSS in JSの独自記法だと思っていた）

CSS Grid Layout

株式会社ICSさんのオウンドメディアを紹介してくださっており、これが超知りたかったです。

これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA

Float、Flexbox、Grid Layoutの使い分けを述べており、結論、横にn個のアイテムを並べるならFlexbox、テキストの回り込みはFloat、それ以外は全部Grid LayoutでOK、ということ。
分かりやすい！

Flexboxばっかり使っていたのですが、「あ、そういえばあの <div> たしかにセマンティックには意味が薄いのかも...と思わされました。

まとめ

CSSについて2000年代の知識しかないに等しかったところ、適度にアップデートができました。
日本語の参考サイトかなり助かったので、今後はCSSに関する日本語の優良情報が集まっているところを探していきたい。