FLOCSSを採用してるサイトについて質問です。
比較的大きなサイトを制作するにあたって複数のコーダーでコーディングをすることになりました。そこでCSS設計のルールにFLOCSSを取り入れようと思っています。概ねルールはわかったのですが、FLOCSSの基本ルールに近いHTMLマークアップやCSSを書いてるサイトをご存知の方がいたら、そのサイトを教えてほしいです。緑の本やウェブ上のドキュメント等ではわからない具体的な部分が見たいので、特にコンポーネントやプロジェクトの使いどころが確認したいです。
ググッて見つからないレベルなら、それは有名じゃない＝一般的じゃないってことで、複数のコーダーでやるには不適切だと思うよ。
小規模なサイトで何度か使って覚える以外に道はないと思うよ。もし、いきなり実戦投入しようとしているのなら、それには無理がある。
メンバー的には3人中2人はSMACSSを参考に独自にCSS設計して制作してるメンバーで、もう1人もフロントエンドの仕事は詳しいので、大体のことはわかってます。今回はさらに一歩進んでという趣旨です。やはりどんな管理ルール付けを行ってるのか参考にするのは本番サイトが一番なので知りたいのです。
グリコが良い線いってる
ありがとうございます。グリコはグローバルナビをPC版でもハンバーガーにしてるんですね。ちょっと驚きましたｗ 命名はMindBEMdingでBEMっぽい感じですね。Utilityのクラスも設定してあるみたいですし、FLOCSS的要素をとりいれてるみたいです。ただFLOCCSでいうところのProjectとComponentの定義はないようで、そこはBEMのBlockとElementのような分類でやってるみたいですね。参考になります。わたしも最近リニューアルしたサイトをけっこう探しましたが、BEMとSMACSSの合体みたいなルールのサイトなら見つかるもののなかなかFLOCSSをほぼそのまま取り入れてるサイトは少ないみたいです。もし発見されたら教えてもらえると助かります。今のところ見つかったのは以下のサイトです。passivedesign.jp/
食べログがFLOCSS likeかとおもいます。FLOCSSそのまんまというのは数はあまりないというか結局のところそれぞれのプロジェクトにあった粒度を考えるべきでしょうね。
ありがとうございます。かなり近い感じですね。FLOCSSそのままのルールでやってる制作会社があれば見つけられればいいんですけど、なかなかないですね。おっしゃるように確かにプロジェクトごとにというのが理想だとは思うのですが、それぞれあまり絡むことのなかったメンバー同士で、それぞれが独自のCSS設計を持っています。今後は絡むことが多そうで、その差異を埋めるべくドキュメントも公開されているFLOCCSをルールは若干変えるにしろ活かしたいと思ってます。
みんなの回答 4 件
ググッて見つからないレベルなら、それは有名じゃない＝一般的じゃないってことで、複数のコーダーでやるには不適切だと思うよ。
小規模なサイトで何度か使って覚える以外に道はないと思うよ。もし、いきなり実戦投入しようとしているのなら、それには無理がある。
グリコが良い線いってる
グリコ
https://www.glico.com/jp/食べログがFLOCSS likeかとおもいます。FLOCSSそのまんまというのは数はあまりないというか結局のところそれぞれのプロジェクトにあった粒度を考えるべきでしょうね。
食べログ - ランキングと口コミで探せるグルメサイト
http://tabelog.com/関連するトピックス