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

編集履歴

回答編集履歴

11

文字の修正

2019/09/08 12:36

投稿

takopo
takopo

スコア484

test CHANGED
@@ -1,6 +1,6 @@
1
- `BEM`だけではSilkyさんのような問題にぶつかってしまうので、`FLOCSS`のようなCSS設計手法を取り入れて、そのルールに従うのが良いのではないでしょうか。
1
+ `BEM`だけではSilkyさんのような問題にぶつかってしまうので、`FLOCSS`などのCSS設計手法を取り入れて、そのルールに従うのが良いのではないでしょうか。
2
2
 
3
- CSS設計手法と取り入れると、再利用・拡張しやすいCSSを作ることができるようになります。
3
+ CSS設計手法を使うと、再利用・拡張しやすいCSSを作ることができるようになります。
4
4
 
5
5
 
6
6
 
@@ -140,4 +140,4 @@
140
140
 
141
141
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
142
142
 
143
- ただし、`Element`はその`Block`があることが前提なので、`.section__ttl`を使う場合は`.section`が必要です。
143
+ ただし`Element`はその`Block`があることが前提なので`.section__ttl`を使う場合は`.section`が必要です。

10

文章の修正

2019/09/08 12:36

投稿

takopo
takopo

スコア484

test CHANGED
@@ -92,6 +92,8 @@
92
92
 
93
93
  }
94
94
 
95
+
96
+
95
97
  .c-ttl--primary {
96
98
 
97
99
  color: blue;

9

文章の修正

2019/09/08 10:38

投稿

takopo
takopo

スコア484

test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
  ```css
114
114
 
115
- // Component
115
+ /* Component */
116
116
 
117
117
  .c-ttl {
118
118
 
@@ -122,7 +122,7 @@
122
122
 
123
123
 
124
124
 
125
- // Project
125
+ /* Project */
126
126
 
127
127
  .p-about__ttl {
128
128
 

8

文章の修正

2019/09/08 10:37

投稿

takopo
takopo

スコア484

test CHANGED
@@ -84,19 +84,17 @@
84
84
 
85
85
  ```
86
86
 
87
- ```scss
87
+ ```css
88
88
 
89
89
  .c-ttl {
90
90
 
91
91
  color: red;
92
92
 
93
+ }
93
94
 
95
+ .c-ttl--primary {
94
96
 
95
- &--primary {
96
-
97
- color: blue;
97
+ color: blue;
98
-
99
- }
100
98
 
101
99
  }
102
100
 
@@ -112,7 +110,7 @@
112
110
 
113
111
  ```
114
112
 
115
- ```scss
113
+ ```css
116
114
 
117
115
  // Component
118
116
 
@@ -126,17 +124,11 @@
126
124
 
127
125
  // Project
128
126
 
129
- .p-about {
127
+ .p-about__ttl {
130
128
 
131
- &__ttl {
132
-
133
- color: blue;
129
+ color: blue;
134
-
135
- }
136
130
 
137
131
  }
138
-
139
-
140
132
 
141
133
  ```
142
134
 

7

文章の修正

2019/09/08 10:35

投稿

takopo
takopo

スコア484

test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
  ```
142
142
 
143
- のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすく可読性の高い書き方になるかなと思います。
143
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい書き方になるかなと思います。
144
144
 
145
145
 
146
146
 

6

文章の修正

2019/09/08 09:23

投稿

takopo
takopo

スコア484

test CHANGED
@@ -146,4 +146,4 @@
146
146
 
147
147
  ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
148
148
 
149
- ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。
149
+ ただし、`Element`はその`Block`があることが前提なので、`.section__ttl`を使う場合は`.section`が必要です。

5

文字の修正

2019/09/08 09:22

投稿

takopo
takopo

スコア484

test CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  ```
70
70
 
71
- のような書き方は許容されていません。ただなるべくこういった上書きは避けたいです。
71
+ のような書き方は許容されていません。ただなるべく別レイヤーへの上書きは避けたいです。
72
72
 
73
73
 
74
74
 
@@ -140,7 +140,7 @@
140
140
 
141
141
  ```
142
142
 
143
- のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
143
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすく可読性の高い書き方になるかなと思います。
144
144
 
145
145
 
146
146
 

4

文字の修正

2019/09/08 08:49

投稿

takopo
takopo

スコア484

test CHANGED
@@ -104,7 +104,7 @@
104
104
 
105
105
 
106
106
 
107
- もしくは.about 内だけで使うのでしたら、
107
+ もしくは.about 内だけ変えるのでしたら、
108
108
 
109
109
  ```html
110
110
 
@@ -140,7 +140,7 @@
140
140
 
141
141
  ```
142
142
 
143
- のように .p-about のブロックとして別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
143
+ のように .p-about の`Element`として別にスタイルを設定すれば、より分かりやすい記述になるかなと思います。
144
144
 
145
145
 
146
146
 

3

文字の修正

2019/09/08 08:32

投稿

takopo
takopo

スコア484

test CHANGED
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
 
77
- なのでもし .ttl だけ色を変えたいというような場合、下のように Modifier を使うか、
77
+ なのでもし .ttl だけ色を変えたいというような場合、下のように`Modifier`を使うか、
78
78
 
79
79
 
80
80
 
@@ -144,6 +144,6 @@
144
144
 
145
145
 
146
146
 
147
- ご質問の答えとしましては、CSS設計の種類によりますが、ブロックの中に他のブロック内で使用されているクラスが出てくるのは「あり」だと思います。
147
+ ご質問の答えとしましては、CSS設計の種類によりますが、`Block`の中に他の`Block`内で使用されているクラスが出てくるのは「あり」だと思います。
148
148
 
149
- ただし、ブロック内で使用されているクラスはそのブロックがあることが前提です。`.section__ttl`を使う場合は`.section`が必要です。
149
+ ただし、`Element`はその`Block`があることが前提です。`.section__ttl`を使う場合は`.section`が必要です。

2

文字の修正

2019/09/08 08:20

投稿

takopo
takopo

スコア484

test CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  ```
70
70
 
71
- は許容されていません。ただなるべくこういった上書きは避けたいです。
71
+ のような書き方は許容されていません。ただなるべくこういった上書きは避けたいです。
72
72
 
73
73
 
74
74
 

1

文字の修正

2019/09/08 08:12

投稿

takopo
takopo

スコア484

test CHANGED
@@ -44,9 +44,9 @@
44
44
 
45
45
 
46
46
 
47
- - about というプロジェクトには接頭辞に p を付けます。
47
+ - about というプロジェクトには接頭辞に`p-`を付けます。
48
48
 
49
- - inner と ttl は共通するコンポーネントなので、接頭辞に c を付けます。
49
+ - inner と ttl は共通するコンポーネントなので、接頭辞に`c-`を付けます。
50
50
 
51
51
  - プロジェクトからコンポーネントを上書きできますが、その逆はできません。
52
52