「Sketchy Talks #1 CSSについて学ぶ」に参加してきた
Sketchy Talks #1 CSSについて学ぶ、有意義な時間でした。
僕のパートは、こちらに書いております。 www.kobatatakayuki.com
- 参加者・発表一覧
- CSSアニメーション はじめました @てつ さん
- CSS のfilterについて紹介と試してみたことなど @yasui821 さん
- CSS設計とスタイルガイド @小畑タカユキ さん
- 案件規模と拡張CSSのベストな関係について @lyca さん
- ミニマムなCSSフレームワーク @maki_saki さん
- コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
- CSSにおける「詳細度」とは何かを説明してみる @mikakane さん
参加者・発表一覧
ゆるい基礎的なテーマから、細かい内容まで何でもOKです。
とのことで、参加してきました。
今回の出演者は下記の通り。
- CSSアニメーション はじめました @てつ さん
- CSS のfilterについて紹介と試してみたことなど @yasui821 さん
- CSS設計とスタイルガイド @小畑タカユキ さん
- 案件規模と拡張CSSのベストな関係について @lyca さん
- ミニマムなCSSフレームワーク @maki_saki さん
- コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
- CSSにおける「詳細度」とは何かを説明してみる @mikakane さん
箇条書きですが、メモ。
CSSアニメーション はじめました @てつ さん
- Velocity.js：http://julian.com/research/velocity/
- 参考：https://sitest.jp/
- jQueryとセットで使われることが多い
- IE8を対応しないのであれば、jQueryはいらない
CSS のfilterについて紹介と試してみたことなど @yasui821 さん
- IEでは使えない
- ぼかしをかけすぎると、ブラウザに負荷がかかる？？固まってしまった
- opacityとfilter:alphaの違いがわかった
CSS設計とスタイルガイド @小畑タカユキ さん
記事に書きました。
案件規模と拡張CSSのベストな関係について @lyca さん
- 引き継いだ時には、カオスな状態
- 社内共有がなかなかうまくいかない
- 実際に理解を示してくれているのは、リードエンジニアの方だけ
- !important の乱用は、どうにもならない
- リニューアルできればしたほうがいいのでは
- 学習コストの問題よりも、体制の問題では？（プランナーがJS触るとか、まぁありえない）
ミニマムなCSSフレームワーク @maki_saki さん
- Skeleton：http://getskeleton.com/
- HTMLをかくだけでそれなりに使える
- normalize的な使い方
- コード12kb
- インブラウザデザイン（ブラウザ上でデザインするという手法）
- グリッド部分は、Bourbon/Neatで対応している
- OOCSS、場所に依存しない
コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
- CSS設計はむずかしい
- まずは、「予測しやすい」と「再利用しやすい」に注力する
- 参考書籍：Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- OOCSSで考える -- 構造と見た目（スキン）をわける -- コンテナーとコンテンツを分離 -- 場所に依存しないセレクタにする
- SMACSS -- 接頭辞で役割を分ける
- 「破綻しないCSSをつくる」という意識が大事
CSSにおける「詳細度」とは何かを説明してみる @mikakane さん
- CSS詳細度のグラフ：https://jonassebastianohlsson.com/specificity-graph/
- グラフがガタガタになると、あまりよろしくない
- できれば、右上あがりが良い
- つまり、詳細度が低いものを先に書く
- Sassの入れ子は詳細度があがりやすい
- OOCSSで考える
- DOMの構造とCSSの構造を一緒にしない
- 詳細度について意識することは重要
- 定期的にツールで確認することもあり
- もう、宗教的な話になってくる
おわり。
