質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1493閲覧

FLOCSSは、原則子孫セレクタは禁止なようですが、 そうすると下記のようにmainの中にpが複数ある場合、 全部のクラスを,区切りで指定しないといけなくなりますよね。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/09 05:06

FLOCSSは、原則子孫セレクタは禁止なようですが、
そうすると下記のようにmainの中にpが複数ある場合、
全部のクラスを,区切りで指定しないといけなくなりますよね。

下記のようにできない。
main p{
margin: auto;
text-align: center;
}

カンマ区切りで5個以上のセレクタがあるというのは問題ないのでしょうか?

再利用制との妥協点はどこにしていますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問文から推測するにこういう状況ですかね。

html

1<main> 2 <p></p> 3 <div id="foo"> 4 <p></p> 5 <div id="bar"> 6 <p></p> 7 </div> 8 </div> 9</main>

共通の指定をしたいならClassを使えばいいと思います。

html

1<main> 2 <p class="hoge"></p> 3 <div id="foo"> 4 <p class="hoge"></p> 5 <div id="bar"> 6 <p class="hoge"></p> 7 </div> 8 </div> 9</main>

css

1/* 利用箇所の指定 2main > .hoge 3.foo > .hoge 4.bar > .hoge 5*/ 6.hoge { 7 margin: auto; 8 text-align: center; 9}

とした上で回答します。

カンマ区切りで5個以上のセレクタがあるというのは問題ないのでしょうか?

css

1.foo > p, 2.bar > p, 3.aaa > p, 4.bbb > p, 5.ccc > p { 6 margin: auto; 7 text-align: center; 8}

(条件付きで)問題ありでしょうね。
FLOCSSは無駄な繰り返し、重複を避けるはずです。
そも、CSSの基礎の部分で解決できます。

css

1h1, h2, h3, h4, h5, h6 {}

は問題ないと思います。

再利用制との妥協点はどこにしていますか?

基本はClassセレクタで無駄のないよう指定するので、妥協もなにもないと思ってます。

投稿2016/07/10 22:00

Ryo

総合スコア507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/11 00:08

ulの中のli10個にすべて同じクラスがあることは全く問題ないのですね。 共通の部分と共通でない部分がある場合、oocssのように共通の部分を分離してマルチクラスで対応するでOKですかね。 下記はよくないのですね。それならマルチクラスのほうがよほどいいのですね。 ただ同じ、グループのhタグならよいのですか?どう違うのでしょうか? .foo > p, .bar > p, .aaa > p, .bbb > p, .ccc > p { margin: auto; text-align: center; }
Ryo

2016/07/11 11:01

そのul下のliはすべて同じスタイルを適用するなら子セレクタを使って直接の子を指定して /* あるul その1*/ .xx > li {margin: 10px} /* あるul その2*/ .yy > li {margin: 4px} この場合利用場所としては、ドロップダウンメニューでしょうか? 下2つの例を挙げたのは、許容範囲の違いです。 .foo > p, .bar > p, .aaa > p, .bbb > p, .ccc > p { margin: auto; text-align: center; } の例は、新たに .ddd や .eee の直下の p も指定しなければならなくなった場合 .ddd > p, .eee > p , .....と指定する場所が増えるたびに追加しなければならなくなるため宜しくない。 h1, h2, h3, h4, h5, h6 {} の例 そうですね、タグに依存しているのであまり良い指定ではないです。 .headGrp {} とした方がいいとも思います。 ここから私の考えなのですが、この程度ならまだ許容範囲かなとはおもいます。 というのもHTMLのバージョンが上がったとして、hタグが h7, h8, h9 ...... と増えるようには思えないのです。
退会済みユーザー

退会済みユーザー

2016/07/13 02:30

>>> h1, h2, h3, h4, h5, h6 {} の例 そうですね、タグに依存しているのであまり良い指定ではないです。 .headGrp {} とした方がいいとも思います。 はこれ以上増えないので、h1, h2, h3, h4, h5, h6 となってもOK >>> .foo > p, .bar > p, .aaa > p, .bbb > p, .ccc > p { margin: auto; text-align: center; } は、要素が増えれば無限に増えていくのでNG OOCSSのようにマルチクラスにすべきということでよいでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問