0
0
ご相談
コーディング歴半年
クラス名の付け方にかなり悩んでおり、現在はCSS設計完全ガイドを購入して勉強中です
気になっている会社がBEMを採用していたのでまずはBEMからと思い挑戦してみたのですがわけが分からくなってしましました
自分がBlockを作っているのかElementを作っているのか、判断がつきません
.headerがBlockなのはわかります
次に.header-logoとつけた場合これはなんですか?
また、CSSの使いまわしが効くようにしておいた方がいいという記事をみたのでそのようにしたいと思っているのですが、そこで考えすぎてしまいます
例えば、news-listというクラス名をつけると、お知らせ以外のリストで同様のCSSを使用したい場合、「newsじゃないのにnews-listのクラス名をつけてCSSを使い回すのは変なのではないか」と思うからです
勉強方法や参考になる実際のサイト等ありましたら教えていただきたいです
他にもBEM以外におすすめのCSS設計などありましたらお聞きしたいです
下記に実際にクラス名をつけてみたものを載せます
デザインカンプ等ないのでわかりづらいかと思いますが変なところがあったり、自分ならこうするという書き方があれば教えてください
宜しくお願いいたします。
該当のソースコード
HTML
1<header class="head"> 2<h1 class="header__logo"><a href="index.html" class="header__logo-link"></a></h1> 3 4<div class="hamburger"> 5<span class="hamburger__line"></span> 6<span class="hamburger__line"></span> 7<span class="hamburger__line"></span> 8</div><!--hamburger--> 9 10<nav class="g-nav" id="g-nav"> 11<ul class="g-nav__menu"> 12<li class="g-nav__menu-item"><a href="#" class="g-nav__menu-link">テキスト</a></li> 13<li class="g-nav__menu-item"><a href="#" class="g-nav__menu-link">テキスト</a></li> 14<li class="g-nav__menu-item"><a href="#" class="g-nav__menu-link">テキスト</a></li> 15<li class="g-nav__menu-item"><a href="#" class="g-nav__menu-link">テキスト</a></li> 16</ul> 17 18<div class="btn"><a href="#" class="btn__link">お問い合わせ</a></div> 19</nav> 20</header> 21 22<section class="mv"> 23<div class="mv__slider"> 24</div><!--main__slider--> 25 26<div class="mv__copy"> 27<h2 class="mv__copy-ja text_mplus">テキスト</h2> 28<p class="mv__copy-en text_lato text_green">テキストの英文</p> 29<a href="about/" class="text_sans mv__copy-btn">aboutページに続くボタン</a> 30</div><!--mv__copy--> 31 32</section><!--mv-->
HTML(section内で2カラムになった時)
1<section class="section about" id="about"> 2<div class="section__inner"> 3 4<div class="section__2column"> 5 6<div class="section__2column-img-wrap"> 7<img src="images/image.png"> 8</div><!--section__2column-img-wrap--> 9 10<div class="section__2column-body"> 11<h3 class="subtitle02">セクションのタイトル<span class="en text_lato">section no title</span></h3> 12<h4 class="section__copy text_mplus">セクションのキャッチコピー</h4> 13<p class="section_text">セクションのテキスト</p> 14</div><!--section__2column-body--> 15</div><!--section__2column--> 16 17</div><!--section__inner--> 18</section><!--about-preventive-->
回答1件
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。