FLOCSSのheader、footerなどは、headerであればそれのpadding、背景色など、 header要素自体につけるcssだけ記載するのですよね。

Question

FLOCSSのheader、footerなどは、headerであればそれのpadding、背景色など、
header要素自体につけるcssだけ記載し、その中にある、会社のロゴやその直下にある社名などは、一切入れずに別ファイルに分離すると考えれよろしでしょうか？

公式にそこまでの記載がありません。

ただ同じような質問をしていますが、ロゴくらいは別ファイルにしてもよいですが、
headerの中にあるロゴ直下にある社名、h1、メインコピーライトなどもすべて別ファイルにしないといけないとなると、すべての要素を独立したファイルにしないといけなくなり、あまりに大変すぎます。

header.cssの中に記載できないならどこに記載していますか？
ロゴ直下にある社名、h1、メインコピーライトなどもすべて別ファイルにして、しかも全部
一つ一つcssファイルを作っていますか？

それともheader-inside.cssなど作ってロゴ直下にある社名、h1、メインコピーライトなどは、そのサイトで二度使わない、他サイトでの再利用をしそうにないという条件を満たした場合のみ、細かすぎて大変すぎる場合はそこにすべて入れていますか？

Answer 1

header 要素、またはその子孫かつ他で使用していないのであればまとめて書いてしまいますね。
layoutレイヤなのでIDセレクタが推奨されます。

基本は別々のファイルで管理してますね。
どうせ最後は Import するだけなので

/* header.css */
header {}
#logo {width: auto; height: auto; outline: none; border: 0;}
#com {}

footerでも同様ですね。

/* footer.css */
footer {}
#copy {content : 'example © yyyy';}

Comments

[退会済みユーザー]

ありがとうございます。

header.cssなどはヘッダー要素自体のCSS以外も入れてOKということですか？

[Ryo]

はい、OKだと思いますよ。
header.cssには header 要素 または header内にしか存在しないIDだけ定義する
ものだと私は解釈しています。

参考
https://github.com/hiloki/flocss#layout

[退会済みユーザー]

個人的にご自身でそうお考えになったということですね。

公式サイトにはそのあたりのきさいはないですよね。

[Ryo]

SMACSSのレイアウトルールが参考になると思いますよ。

[退会済みユーザー]

FLOCSSもSMACSSを参考に作っているので、ほぼ同じと考えてよいのですね。

SMACSSが同分割しているかわかれば、FLOCSSも同分割するかわかるということですね、
ありがとうございます。

[Ryo]

SMACSS意外に影響を受けているものはあるので、それらも見ておいた方がいいですね。