質問するログイン新規登録
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

意見交換

クローズ

1回答

348閲覧

BEM設計の身につけ方についてご意見いただきたいです

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2023/10/12 07:41

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-->

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

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

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

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

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

回答1

#1

Lhankor_Mhy

総合スコア37566

投稿2023/10/12 08:08

直接的な回答でなくてすみません。

個人的には、カスケードレイヤーがBEMの必要性をやや減じたと考えています。将来的に @scope の実装が進めば、コンポーネント単位でのCSS管理が容易になり、さらにその傾向が進むと思います。
これからいろいろな設計思想が登場すると思いますが、純粋なBEMは廃れるのではないか、と思っています。

参考:
Cascade Layerは汚れ切ったCSSの救世主になれるのか?
@scope - Chrome Platform Status
CSSにそのうち導入されそうな@scopeとその関連概念

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

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

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問