コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

Object-Oriented Conference 2024​​で『オブジェクト指向CSSが叶えたかったことと、CSSのいま』という登壇をしてきました

発表したスライド

speakerdeck.com

伝えたかったこと

  • オブジェクト指向CSSはどういう問題意識から生まれ発展したのか
  • その後の世界ではどうなったのか
  • いまだとどんな選択肢が取りうるのか
  • フロントエンドやっている人は知っている人が多いので、普段フロントをガッツリやらない人向けへの現状共有

補遺編

今回のプロポーザルを作ろうとした動機

直近ではRuby on Railsでバックエンドを書くことが多く、CSSには触れるものの自分から能動的に何かをするわけではありませんでした。

そんな中で改めてCSSを書き直す場合、どのようなアプローチがあるんだ?というところの知見がまったくなく、そのあたりの知識を仕入れたいというのがありました。

そんな中、4年ぶりのObject-Oriented Conferenceが開催されるというところで昔に読んだ下記の本のことを思い出します。

『Web制作者のためのCSS設計の教科書』を読み終わったよメモ - コード日進月歩

この本では命名規則ベースの設計手法が書かれているのですが、ここでオブジェクト指向CSSが紹介されていたので、ここからたどっていくことで色々と話が書けるのでは?ということでプロポーザルに応募しました。

登壇駆動知識インプットと紆余曲折したポイント

もともとバックエンドかつ業務も基本はバックエンドを書くことが主体なので、完全に個人の時間にいろいろと知識のインプットを進めました。

今回トピックとして

  • 命名規則ドリブンのCSS名付け
  • JavaScriptと共存しているCSS管理手法
  • 直近のCSS新仕様
    • このあたりは話の筋書き的にカットしたかったんですが、プロポーザルに書いてしまったので取り上げる必要がでてきてしまい…

あたりをいい感じに一つの話の流れとしてまとめる必要があったので、どうつなげていくとキレイかがかなり悩ましいポイントでした。

うんうん悩みながら整理していったのですが、悩んでる最中で色々なインプットと巡り合うことができ、なんとか着地させることができました。今回大きく助かったのは以下の3つです。

  1. CSS設計って最近こういう感じだと思うんですけどどうですか - Speaker Deck
  2. 次世代Webカンファレンス2023のCSSパート
  3. 書籍:Tailwind CSS実践入門

今回取り上げられなかったところ

CSSの影響範囲(いわゆるスコープ)の話に関してはShadow DOMの話もあったのですが、今回のテーマにはイマイチマッチしていなかったのでカットしてしまいました。ただDeclarative Shadow DOM が出てきたのでJSなしでできることで違う世界観が出てくるのかもなという感覚を感じています。

また、詳細度がらみの話はカットしてしまいましたが、ブログにはまとめてあります。

登壇後記

  • 本当にCSSの話だったので、全然お客さんいないのではないかと思ったらそこそこに人が入ってくれたので助かりました。
  • 前段で『非デザイナーのフロントエンドエンジニアがOOUIを考える』があったので、ちょっと地続きの話が聞けてよかったです。
  • めっちゃ喋りは失敗しており、最初最大化し忘れたりなどしつつ変な飛ばしはなかったかな…とか…色々振り返ると思います。
    • そうなってもいいように資料でよんだらちゃんとわかるようにはしたつもりなので傷は浅くありたい
  • 今回の資料整理でデザインシステムやデザイントークンの話は面白そうなトピックが多いので、そのあたりも含めてインプットはしていきたくなりました。
  • OOCというカンファレンスが色々な技術バックグラウンドを持つ人が多かったので、懇親会でも様々な話が聞けてとても勉強になりました!