知ってた？ナルホド！
平原
前回に引き続き、フロントエンド山田さんと、『コーディングするときに気をつけていること』というテーマでお話したいと思います。
よろしくお願いします。
山田
よろしくお願いします〜。
平原
前回のお話で、タグの適切な選定や、見出しとその下に繋がる要素の順番に気をつけていると言っていましたが、その他には、なにかありますか？
山田
CSSの設計ですね。Classやidの命名規則や、ファイルの構成を意識しています。
平原
CSSの設計は、BEM、OOCSS、SMACSSなど色々ありますよね。山田さんは、社内でFLOCSSを採用されましたが、どうしてFLOCSSにしようと思ったのですか？
山田
Web制作を始めた当初は、CSSの設計について、あまり注目されておらず、人によってCSSの設計はバラバラでした。その頃は、人の書いたコードを受け取って、追加作業や修正作業をすることが多かったです。
学べることも多かった反面、人によってコードの書き方やファイルの構成がバラバラだったので、何か良いCSSの設計がないかと悩んでいました。
そこで、FLOCSSというCSSの設計を知って、これを使えばCSSの書き方は統一できると感じました。
平原
FLOCSSは、他のCSSの設計方法と違って、どんな部分が良いと持ったのですか？
山田
始めて試したCSSの設計方法は、OOCSSでした。ですが、それだとClass名はコードを書く人や設計する人によって変化してしまいます。
チーム内で命名規則のルール化をする為には、別のドキュメントを用意して、詳しく共有しなければいけませんでした。BEMを使えば、Class名に法則性を持たせることができるので、始めはBEMを採用していました。
平原
BEMは多くのコーダーが採用しているCSSの設計方法ですね。
山田
BEMだけでもClassの命名規則は、ある程度統一することができるようになりましたが、今度は、Sassファイルの分割が人によってバラバラになり、mapファイルを使わなければ、どこに何が書いてあるのかが分からなくなりました。そこで気になったのが、SMACSSです。
平原
FLOCSSに至るまでに色々試されたんですね。
山田
そうですね。BEMはコーディングをする時のデザインの見方としても素晴らしい考えだと思いました。
平原
Block、Element、Modifierですね。
山田
SMACSSは命名ルールの他に、CSSのファイル構成についてもルール化しやすい為、BEMとSMACSSを組み合わせることはできないかとうっすら考えていました。
そんなことを思い続けて年月は経ち、CSSの設計をもう一度おさらいしていた時に、FLOCSSと言うCSS設計があることを知りました。
FLOCSSはGitHubにドキュメントがあって、読んでみるとSMACSSとBEMを組み合わせたもので、命名規則とファイル構成についても明確にルール化されていました。
平原
求めていたCSSの設計方法だったということですね。
山田
はい。FLOCSSを導入すれば、チーム内で効率良くコーディングが行えると思いました。しかしまだまだ問題はあって、どれがBlockで、どれがElementなのかは、人によって解釈が違うので、チーム内で認識を合わせないといけなかったり、Elementの中の要素は、Blockなのか、Elementなのか、迷うことがあります。
平原
MindBemdingでは、命名するときの起点はBlockですよね。
私がFLOCSSが便利だと思うところは、layoutとobjectを分けるという考え方で、プレフィックスでCSSの命名がやりやすくなったところです。
山田
例えばヘッダーを作るときは、社内だと「l-header」と「p-header」で構造と見た目を分けていますが、今までだと全体で「header」だったので、パーツ単位のスタイルがひとまとまりで書かれてしまっていたりして、影響する範囲がわからなくなってしまったり、デザインに変更があったときの手間がかかっていましたね笑
平原
そうですね。FLOCSSを使用すると、影響範囲がある程度可視化できるので有難いです。
componentは最高ですね。
山田
デザインも、componentが意識して作られていると、最高ですね(小声)。
平原
今日は、FLOCSSが登場するまで長かったですね。山田さんとお話すると、昔の苦労や教訓が聞けるので、若手のコーダーとして勉強になります。
山田
私がコーダーになりたての頃と比べると、技術や考え方は変わってきているけど、苦労話くらいしか役に立ちそうなことは言えなさそう笑
平原
そんなことないですよ笑
2回に渡って『コーディングするときに気をつけていること』についてアッタデザインの開発チームのメンバー同士で話してまいりましたが、最後にチームリーダーの山田さんに、感想をお聞かせ願えればと思います。
山田
気をつけていることと言いつつも、皆さんが日々意識しているような内容かと思います。私だからこそと特別気をつけているようなことは無いのですが、人や環境によって多少気をつけないといけない点は変わると言う印象です。
今回の対談では、普段はしないような会話をしているので、自分にとってもおさらいとなるいい時間になりました。
平原
コーダー歴の長い山田さんでも、日々試行錯誤されているということがよく分かる対談でした。山田さん、有難うございました！
山田
引き続き、頑張ろう！
