FLOCSS勉強会 ( 1日目 )

github.com

経緯

同じCSSを長期(半年)触る必要が出てきたため、FLOCSSの導入を検討した

一人でCSS設計を勉強するより人と意見の擦り合わせをした方がいいと思い、友人と3人で勉強することにした。

流れ

1日目、FLOCSSについての疑問の洗い出し、参考サイトの共有 2日目、各々FLOCSSでWebページ作成 3日目、各々の作成物(どういう命名をしたのか)を見せ合う

今回は1日目の記録です

事前知識

BEM記法について調べたことがある程度

1日目で出た疑問点

  • プロジェクトとコンポーネントの違い
  • 命名のコツ(レスポンシブを見越すと left-nav などはよくない?)
  • 現場ではどのCSS記法が主流なのか

参考

GitHub - traveler20/sass-flocss-tutorial: Sass×FLOCSSのチュートリアル本のソースコード

LPをつくって学ぶSass×FLOCSS

三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す – PSYENCE:MEDIA

FLOCSSメモ - Qiita

GitHub - hiloki/flocss: CSS organization methodology.

CSS設計の目的とFLOCSSの概要 - FLOCSSで始めるCSS設計 - to-R Media