FLOCSS 勉強会( 3日目 )

github.com

経緯

↓1日目

https://mikka-tech.hatenablog.com/entry/2022/03/17/041037

↓2日目

https://mikka-tech.hatenablog.com/entry/2022/03/18/134136

今回は3日目 (最終日) です。

やったこと

友人と3人で制作物を見せ合いました。 ついでに grid でのレスポンシブについても相談し合いました。

感想

今回の形式（1日目勉強の方針決め、2日目各自で調べる、3日目全員でソース・情報の共有）がめっちゃいい感じに刺さった。

「一人で自分のペースで勉強する楽しさ」と「人とスケジュールを合わせて期限を決める重要性」の両方のいいとこ取りができるので、とても効率の良い学習体験だと思いました。

1日目記事を見てただけだと全然理解できなくて不安だったけど、2日目実践してみたら思ったよりすんなり書けて良かった。

あと、今回一人FLOCSSを先に勉強していた人がいたので自分がみんなに返せるものが無いかもしれないという思いがあったけど、自分だけが見つけた・気づいたことを広めたり、他人のコードの変なところを指摘したり、意外と善戦できて嬉しかった。

わかったこと

  • 記法はチーム内で合わせてサイト全体で統一されていればある程度は自由
    • p-top-visual__title (block-element__modifier)
    • p-topVisual__title (block-Element__modifier)
    • p_top_visual--title (block_element--modifier)
  • 人に口頭でやり方を教えるのは難しそう。今回やったことを全員にやってもらうのが一番かも知れない。
  • マルチクラスとして .is-active を持たせるのはあり。
    • 注意 : is-active そのものに style を当てるのは禁止
    • .p-topVisual__title.is-active に style を当てる
  • サイトが小さいとほとんど project に詰め込むことになりそう？
  • component はサイト全体で使いまわせるものを最初に見繕う
  • component は @extend を活用すべし
.c-button{
    white-space: nowrap;
    padding: 8px;
    width: 100%;
    border: 1px solid #000;
    text-align: center;
    &__rounded{
        @extend .c_button;
        border-radius: 100px;
    }
}