teratail
回答率
85.29%
質問するログイン新規登録
トップCSS3に関する質問BEMにおける使いまわしするクラスの記述の仕方について

編集履歴

回答編集履歴

11

文字の修正

2019/09/08 12:36

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -1,5 +1,5 @@
1
- `BEM`だけではSilkyさんのような問題にぶつかってしまうので、`FLOCSS`のようなCSS設計手法を取り入れて、そのルールに従うのが良いのではないでしょうか。
1
+ `BEM`だけではSilkyさんのような問題にぶつかってしまうので、`FLOCSS`などのCSS設計手法を取り入れて、そのルールに従うのが良いのではないでしょうか。
2
- CSS設計手法と取り入れると、再利用・拡張しやすいCSSを作ることができるようになります。
2
+ CSS設計手法を使うと、再利用・拡張しやすいCSSを作ることができるようになります。
3
3
 
4
4
  [FLOCSS](https://github.com/hiloki/flocss)
5
5
 
@@ -69,4 +69,4 @@
69
69
  のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい書き方になるかなと思います。
70
70
 
71
71
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
72
- ただし、`Element`はその`Block`があることが前提なので、`.section__ttl`を使う場合は`.section`が必要です。
72
+ ただし`Element`はその`Block`があることが前提なので`.section__ttl`を使う場合は`.section`が必要です。

10

文章の修正

2019/09/08 12:36

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -45,6 +45,7 @@
45
45
  .c-ttl {
46
46
  color: red;
47
47
  }
48
+
48
49
  .c-ttl--primary {
49
50
  color: blue;
50
51
  }

9

文章の修正

2019/09/08 10:38

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -55,12 +55,12 @@
55
55
  <h1 class="p-about__ttl c-ttl">このサイトについて</h1>
56
56
  ```
57
57
  ```css
58
- // Component
58
+ /* Component */
59
59
  .c-ttl {
60
60
  color: red;
61
61
  }
62
62
 
63
- // Project
63
+ /* Project */
64
64
  .p-about__ttl {
65
65
  color: blue;
66
66
  }

8

文章の修正

2019/09/08 10:37

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -41,33 +41,29 @@
41
41
  ```html
42
42
  <h1 class="c-ttl c-ttl--primary">このサイトについて</h1>
43
43
  ```
44
- ```scss
44
+ ```css
45
45
  .c-ttl {
46
46
  color: red;
47
-
48
- &--primary {
49
- color: blue;
50
- }
51
47
  }
48
+ .c-ttl--primary {
49
+ color: blue;
50
+ }
52
51
  ```
53
52
 
54
53
  もしくは.about 内だけ変えるのでしたら、
55
54
  ```html
56
55
  <h1 class="p-about__ttl c-ttl">このサイトについて</h1>
57
56
  ```
58
- ```scss
57
+ ```css
59
58
  // Component
60
59
  .c-ttl {
61
60
  color: red;
62
61
  }
63
62
 
64
63
  // Project
65
- .p-about {
64
+ .p-about__ttl {
66
- &__ttl {
67
- color: blue;
65
+ color: blue;
68
- }
69
66
  }
70
-
71
67
  ```
72
68
  のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい書き方になるかなと思います。
73
69
 

7

文章の修正

2019/09/08 10:35

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  ```
72
- のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすく可読性の高い書き方になるかなと思います。
72
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい書き方になるかなと思います。
73
73
 
74
74
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
75
75
  ただし、`Element`はその`Block`があることが前提なので、`.section__ttl`を使う場合は`.section`が必要です。

6

文章の修正

2019/09/08 09:23

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -72,4 +72,4 @@
72
72
  のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすく可読性の高い書き方になるかなと思います。
73
73
 
74
74
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
75
- ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。
75
+ ただし、`Element`はその`Block`があることが前提なので、`.section__ttl`を使う場合は`.section`が必要です。

5

文字の修正

2019/09/08 09:22

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -33,7 +33,7 @@
33
33
  ```css
34
34
  .c-inner .p-about__item {}
35
35
  ```
36
- のような書き方は許容されていません。ただなるべくこういった上書きは避けたいです。
36
+ のような書き方は許容されていません。ただなるべく別レイヤーへの上書きは避けたいです。
37
37
 
38
38
 
39
39
  なのでもし .ttl だけ色を変えたいというような場合、下のように`Modifier`を使うか、
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  ```
72
- のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
72
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすく可読性の高い書き方になるかなと思います。
73
73
 
74
74
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
75
75
  ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。

4

文字の修正

2019/09/08 08:49

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -51,7 +51,7 @@
51
51
  }
52
52
  ```
53
53
 
54
- もしくは.about 内だけで使うのでしたら、
54
+ もしくは.about 内だけ変えるのでしたら、
55
55
  ```html
56
56
  <h1 class="p-about__ttl c-ttl">このサイトについて</h1>
57
57
  ```
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  ```
72
- のように .p-about のブロックとして別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
72
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
73
73
 
74
74
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
75
75
  ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。

3

文字の修正

2019/09/08 08:32

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -36,7 +36,7 @@
36
36
  のような書き方は許容されていません。ただなるべくこういった上書きは避けたいです。
37
37
 
38
38
 
39
- なのでもし .ttl だけ色を変えたいというような場合、下のように Modifier を使うか、
39
+ なのでもし .ttl だけ色を変えたいというような場合、下のように`Modifier`を使うか、
40
40
 
41
41
  ```html
42
42
  <h1 class="c-ttl c-ttl--primary">このサイトについて</h1>
@@ -71,5 +71,5 @@
71
71
  ```
72
72
  のように .p-about のブロックとして別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
73
73
 
74
- ご質問の答えとしましては、CSS設計の種類によりますが、ブロックの中に他のブロック内で使用されているクラスが出てくるのは「あり」だと思います。
74
+ ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
75
- ただし、ブロック内で使用されているクラスはそのブロックがあることが前提です。`.section__ttl`を使う場合は`.section`が必要です。
75
+ ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。

2

文字の修正

2019/09/08 08:20

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -33,7 +33,7 @@
33
33
  ```css
34
34
  .c-inner .p-about__item {}
35
35
  ```
36
- は許容されていません。ただなるべくこういった上書きは避けたいです。
36
+ のような書き方は許容されていません。ただなるべくこういった上書きは避けたいです。
37
37
 
38
38
 
39
39
  なのでもし .ttl だけ色を変えたいというような場合、下のように Modifier を使うか、

1

文字の修正

2019/09/08 08:12

投稿

takopo
takopo

スコア484

answer CHANGED
@@ -21,8 +21,8 @@
21
21
  </section>
22
22
  ```
23
23
 
24
- - about というプロジェクトには接頭辞に p を付けます。
24
+ - about というプロジェクトには接頭辞に`p-`を付けます。
25
- - inner と ttl は共通するコンポーネントなので、接頭辞に c を付けます。
25
+ - inner と ttl は共通するコンポーネントなので、接頭辞に`c-`を付けます。
26
26
  - プロジェクトからコンポーネントを上書きできますが、その逆はできません。
27
27
 
28
28
  つまり