wordpressでサイト制作するときのCSS設計の考え方

Question

wordpressについて、参考書片手にサンプルサイトを１つ作ってみたレベルです。

投稿画面（ビジュアルエディタ）でメディアから画像を貼って、左寄せにしたものの、左に寄らないなあ…なんでだろう…と、ソースを見たら、alignleftというCSSがくっついていました。
ああ、alignleftに対するclassを付けないといけないんだなということで、style.cssに追記して解決したのですが、wordpressでサイト制作するときのCSS設計について疑問がわいてきました。

たとえば投稿画面から段落を入れると<p></p>で出力されるとか、画像を入れると<img>が出力される…ということになると思いますが、投稿画面から突っ込まれるものに対するスタイリングと、テンプレート部分（headerとかfooterとかside）に対するスタイリングは、同じタグでも違う場合があります。
投稿画面内の<p>はmargin-bottom: 20pxだけど、sideテンプレートではmargin-bottom: 10pxになるとか。

そう考えると、cssの設計をする場合、投稿画面内で吐き出されるタグにはclassがないので（←もしかしてこの考えが間違ってますか？）

・投稿画面で吐き出されるHTML
→タグ自体にCSSを書く
・テンプレート部分
→すべてのタグにCLASSをつけて、それに対してCSSを書く

という仕分けで設計をするのが良いのでしょうか？

先達の皆様がどのようにしていらっしゃるのかと思い、質問いたしました。

Answer 1

たとえば、twentyseventeenなんかを見ると、投稿表示部分の親要素には.entry-contentがありますので、.entry-content pのような指定をすれば、ヘッダやフッタやサイドバーに影響を与えずにスタイル宣言をすることができます。

サイドバーには#secondaryが振ってありましたので、同様に投稿内容に影響を与えずにスタイルをすることができるでしょう。

そういう意味でのご質問、ということでよろしかったでしょうか？

Comments

[yukiko]

ご回答ありがとうございます。今、まじまじとtwentyseventeenのソースを眺めていました。
twentyseventeen\template-parts\post\content.phpの中にentry-contentというclassが振ってありますね。ということは、WPが自動でclassを振るのではなく、自分でテンプレートのソースを書くときに、きちんと設計して、自分で振る…という感じですね。理解できました。

恥ずかしながら、twentyseventeenのソースを見たことがなかったんです。今見たら、いろいろと部品化して分けてあったりで、あああー、こんなふうにも作れるんだ、知らなかった…という感じでした。
付け焼き刃的にやってるから、基本的なところに見落としがいろいろ。

ありがとうございました。