FLOCSSについて教えてください。
- 評価
- クリップ 0
- VIEW 2,630
退会済みユーザー
・Componentとは、
CSS設計の教科書でいうとルールオブスリーが該当する場合に初めて検討するコンポーネント（オブジェクトともいう）
のことと考えてよいでしょうか？
つまり、WEBサイト上で何度も利用される部品のことでしょうか？
・Projectとは
プロジェクト固有のパターンでありとは、
プロジェクト固有とはサイト固有ということでしょうか？
Componentとの区別が難しいです。
Componentと、それに該当しない要素によって構成されるものとありますが、
ルールオブスリーに該当しない、再利用しない要素と、
ルールオブスリーが該当する場合に初めて検討するコンポーネント（オブジェクトともいう）と、再利用しない要素が一つのBEMでいうブロックに混在してしまっている、
ブロックがこれにあたるということでしょうか？
＊Foundationから Utilityまでが下記各SCSSにすべて記載してあるということでよろしいでしょうか？
具体例があるとわかりやすいのですが、実際のサイトサンプルなどありませんでしょうか？
フォルダでダウンロードできるとわかりやすくて助かります？
すべてのページに下記すべてを読み込ますのか、SASS未経験者には想像がつきにくいです。
POSTCSS、NEXTCSSでも同じようにすればよいのでしょうか？
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object
├── component
│ ├── _button.scss
│ ├── _dialog.scss
│ ├── _grid.scss
│ └── _media.scss
├── project
│ ├── _articles.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ └── _profile.scss
└── utility
├── _align.scss
├── _clearfix.scss
├── _margin.scss
├── _position.scss
├── _size.scss
└── _text.scss
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
・Projectとは
プロジェクト固有のパターンでありとは、
プロジェクト固有とはサイト固有ということでしょうか？
メチャクチャ簡単に言うと
componentは他のサイトでも使うような部品です（ボタンとかフォームとか、ほかのサイトで使うからといってデザインは一緒である必要はありません、概念としてほかのサイトでも使用するという意味です）
projectは質問者様の仰る通り、自サイト固有のレイアウトだったり部品だったりするものです！
＊Foundationから Utilityまでが下記各SCSSにすべて記載してあるということでよろしいでしょうか？
具体例があるとわかりやすいのですが、実際のサイトサンプルなどありませんでしょうか？
フォルダでダウンロードできるとわかりやすくて助かります？
これはおそらく厳しいんじゃないでしょうか。
ブラウザはscssを読み込んでくれません。
FLOCCSSのようにいろんな部品に分けたscssは最終的には全て結合したりミニファイしたりしてcssに変換されます。
まれに生成されたcssの中にコメントが入ったものもありますが、そういうものを見つけることができたら参考にできるかもしれませんが、
そこに記述してあるcssは全てscssをcssに変換したものなので、詳細まで予測することは不可能だと思います。
また、最後の
POSTCSS、NEXTCSSでも同じようにすればよいのでしょうか？
に関しては、同じようにすればの解釈がわかりませんが、おそらく違うと思います、
そもそも
FLOCSSとPOSTCSSは別物です。
便利なツールや概念が世の中に生まれるのには理由があります。
既存の問題を解決しようとしているのです。
つまり、FLOCSSやPOSTCSSなどもcssに関する何かの問題を解決しようとしているのです。
今のcssはclass名が被っただけで簡単に破壊することが出来ます。
つまり誰かが（自分も）cssを追記していくとどこかでclass名が被った瞬間にレイアウトが崩れてしまうのです。
そういうcssの危険性をどうにかしようと世界中の皆さんが立ち上がってBEMやOOCSSの概念などを生み出しました。
FLOCSSはOOCSSやBEMの概念を取り入れたcssを書くための構成案です。
「こういうふうにcssを構成していったら、cssって便利に書けるよ、運用も保守も簡単だよ」という一案です。
FLOCSS公式のgithubにもこう書いてあります。
FLOCSS（フロックス）は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。
POSTCSSはCSSのスタイルを変更するためのツールです。
「cssを書くときにこういうの不便だろ？オレが作ったツール使えば簡単に書けるよ！」っていうツールです。
FLOCSSはCSSを書くときにこういうふうにファイルを分けたりこういうふうに命名したほうがいいよという構成案、
POSTCSSはCSSを書くときに便利にしてくれるツールです。
なので２つは別物だと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.18%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/06/14 19:01
＞＞＞
メチャクチャ簡単に言うと
componentは他のサイトでも使うような部品です
（ボタンとかフォームとか、ほかのサイトで使うからといってデザインは一緒である必要はありません、概念としてほかのサイトでも使用するという意味です）
projectは質問者様の仰る通り、自サイト固有のレイアウトだったり部品だったりするものです！
ありがとうございます。
componentはルールオブスリーで初めて作成をする、谷さんの言うコンポーネント、つまりパーツとして何度もそのサイト内で使いまわし、
かつ外のサイトにも使うような部品ということですね。
projectはそれに当たらない、使いまわしをしないパーツないしは使いまわすパーツに使いまわさないものが一つでも含まれている場合、
こちらにするということですね。
結構微妙なので、ここはアバウトでもよいかもしれないですね。
＞＞＞
これはおそらく厳しいんじゃないでしょうか。
ブラウザはscssを読み込んでくれません。
FLOCCSSのようにいろんな部品に分けたscssは最終的には全て結合したりミニファイしたりしてcssに変換されます。
まれに生成されたcssの中にコメントが入ったものもありますが、そういうものを見つけることができたら参考にできるかもしれませんが、
そこに記述してあるcssは全てscssをcssに変換したものなので、詳細まで予測することは不可能だと思います。
確かにコンパイル後のものしかふつうはアップロードしてないですね。
谷さん自身が、参考ファイルをアップロードしてくれれば一番ありがたいのですが。
どなたか詳しい方に自作のフォルダ群をアップロードしてして公開してほしいです。
これベースにしているというものを。