読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

「Sketchy Talks #1 CSSについて学ぶ」に参加してきた

Sketchy Talks #1 CSSについて学ぶ、有意義な時間でした。

connpass.com

僕のパートは、こちらに書いております。 www.kobatatakayuki.com

参加者・発表一覧

ゆるい基礎的なテーマから、細かい内容まで何でもOKです。

とのことで、参加してきました。

今回の出演者は下記の通り。

  1. CSSアニメーション はじめました @てつ さん
  2. CSS のfilterについて紹介と試してみたことなど @yasui821 さん
  3. CSS設計とスタイルガイド @小畑タカユキ さん
  4. 案件規模と拡張CSSのベストな関係について @lyca さん
  5. ミニマムなCSSフレームワーク @maki_saki さん
  6. コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
  7. CSSにおける「詳細度」とは何かを説明してみる @mikakane さん

箇条書きですが、メモ。

CSSアニメーション はじめました @てつ さん

CSS のfilterについて紹介と試してみたことなど @yasui821 さん

  • IEでは使えない
  • ぼかしをかけすぎると、ブラウザに負荷がかかる??固まってしまった
  • opacityとfilter:alphaの違いがわかった

CSS設計とスタイルガイド @小畑タカユキ さん

記事に書きました。

www.kobatatakayuki.com

案件規模と拡張CSSのベストな関係について @lyca さん

  • 引き継いだ時には、カオスな状態
  • 社内共有がなかなかうまくいかない
  • 実際に理解を示してくれているのは、リードエンジニアの方だけ
  • !important の乱用は、どうにもならない
  • リニューアルできればしたほうがいいのでは
  • 学習コストの問題よりも、体制の問題では?(プランナーがJS触るとか、まぁありえない)

ミニマムなCSSフレームワーク @maki_saki さん

  • Skeleton:http://getskeleton.com/
  • HTMLをかくだけでそれなりに使える
  • normalize的な使い方
  • コード12kb
  • インブラウザデザイン(ブラウザ上でデザインするという手法)
  • グリッド部分は、Bourbon/Neatで対応している
  • OOCSS、場所に依存しない

コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん

qiita.com

CSSにおける「詳細度」とは何かを説明してみる @mikakane さん

  • CSS詳細度のグラフ:https://jonassebastianohlsson.com/specificity-graph/
  • グラフがガタガタになると、あまりよろしくない
  • できれば、右上あがりが良い
  • つまり、詳細度が低いものを先に書く
  • Sassの入れ子は詳細度があがりやすい
  • OOCSSで考える
  • DOMの構造とCSSの構造を一緒にしない
  • 詳細度について意識することは重要
  • 定期的にツールで確認することもあり
  • もう、宗教的な話になってくる

qiita.com

おわり。