CSSクラス命名規則、FLOCSSとBEM。

[@hirocode]

※動画内でElementのネスト（l-header__nav__item）はOKと説明していますが、公式では非推奨でした、申し訳ございません🙇 正しくは、.l-header__nav、.l-header__itemのような形になります！

[@KentaroxKondo]

公式のBEMドキュメントも読んでみましたが、公式だとmodifierとelementの間はシングルアンダースコア（_）で分ける、と紹介されていました。なので、block__element_modifierとなり、element同士のネストはNG・・・のような書き方だったと思います。 ただ、（ウェブデザイン歴はほとんどありませんが）仕事の関係先で見たCSSは、HIROさんが動画内で紹介されていた通りの設計手法になっていました。日本だと（公式のやり方に従わず）こちらのやり方を採用する場合が多いのですかね？🤔

[@KentaroxKondo]

en.bem.info/methodology/naming-convention/#modifiers 公式ドキュメントで、「Two Dashes style」という手法の紹介もあったようです。すみません！

[@yoshi555]

独学で頑張っている者です。 ちょうどcss設計について悩んでいた所でホントわかりやすい動画でした♪ 何度も見直して勉強頑張ります💪 ありがとうございます😊

[@hirocode]

嬉しいコメントいただきありがとうございます🙇❕独学応援してます😆❗️

[@直美頼地]

BEMについて色々調べていて、良くわからなかったのですが、こちらの動画で腑に落ちました！ありがとうございました！

[@hirocode]

よかったです😆❗️ありがとうございます🙇❗️

[@sptlayzner]

自分は OOCSS を土台に FLOCSS っぽい感じで制作しています。 CSS の表現力が上がり、ほぼ同じ HTML 構造で全く別の意匠にできるケースが多くなったので、 いろいろな面で使い回せて自分には合っています。 BEM は「ちょこっと違うもの」が積み重なると（しかも後出しで）管理などがなかなかに厳しく、 上手く使えれば良いんだろうけどなぁ、と思いつつ使えていません。

[@hirocode]

OOCSS使ったことなかったですが、これもオブジェクト指向の手法なんですね😲❕ BEMはComponentとProectの切り分けが結構曖昧な点があったりして、なかなか試行錯誤するところ多いですよね😅

[@ボコのミュージックライブラリ]

これは永久保存版！ 超ありがたい！！ できたら1年前に知りたかったーー！！！😂笑

[@hirocode]

そう言っていただけて嬉しいです😆♪ ありがとうございます🙇‍♂️❕

[@KAIDSHU]

独学中の者です！ クラス命名規則どうしようか悩んでいたところに、ヒロさんのこの動画のサムネ出てきて、秒でクリックしました😂 画像付きで丁寧な解説で本当に助かりました🙇🏻‍♂️ 毎日コツコツ積み上げ頑張ります💪🏻

[@hirocode]

コメントありがとうございます🙇‍♂️ タイムリーで動画出せてよかったです😆❕ 独学されてるんですね！応援してます😊♪ 僕ももっと参考になるような動画出せるように頑張ります💪

[@ぺんいち]

はじめまして、独学で勉強しているものです。 BEMとFLOCSSの併用について２点質問があります。 １点目が、ブロック名__エレメント名__エレメント名は、勉強した際に間違いというものも見ました。 ブロック名__エレメント名__エレメント名は、実際は記法的に問題ないのでしょうか？ 自分の場合、ブロック名__エレメント名__エレメント名になりそうな場合は、新しくブロックを作ってブロック名__エレメント名としております。 ２点目が、l-header__navとありますが、lはレイアウトのため装飾があるようなものはlとしない認識がありました。 l-header__navは実際には装飾などをしていくと思うので、p-header__navと作成すると思っておりました。実際はどうなのでしょうか？ まだまだ、勉強が足りないため、合っているのか自信が持てないため、HIROさんの見解をお聞きしたいです。 以上、何卒よろしくお願い致します。

[@hirocode]

コメントありがとうございます😊♪ 1点目、2点目共に認識間違いないです❗️混乱させてしまって申し訳ないです、むしろこの動画が間違ってます💦 この動画修正版作らないとですね😱

[@ぺんいち]

@@hirocode お忙しい中早急に回答して頂きありがとうございます。認識あっていてよかったです。今後とも勉強させて頂くので何卒よろしくお願い致します。

[@helvetica4605]

FLOCSSは過剰なんだよなぁ　base, components, project, utils の４つを適切な順番で読み込めばcssが破綻することはないよね

[@hirocode]

わかります！特にlayoutsはなくても全然いけますね🤔

[@pakkan-darake]

BEMでいつも迷うことがあり、質問です。 まず私は、 .l-header__nav--original としたい場合、 そのhtml要素に div.l-header__nav.l-header__nav--original と、長ったらしいですが2つ付けています。 もしhtml上で.l-header__nav--original だけで済むようにする場合、css側では .l-header__nav,.l-header__nav--original{} の2つに共通スタイルを当てないといけず、 それを避けるためにそうしています。 伝えづらいですが、 html上で、 div.parent - div.l-header__nav - div.l-header__nav - div.l-header__nav--original と構築しているという事は、 css上では .l-header__nav　と .l-header__nav--original にそれぞれ共通のスタイルを当てているのでしょうか。 一般的な方法を知りたいです。

[@hirocode]

コメントいただきありがとうございます🙇 どちらかといえば複数付与する形が多いです。すみません、この動画では単一で指定する形になっていますが、どちらも試した結果、僕も現在は複数付与する形をとっています。 ちなみに単一で指定する場合は、 .l-header__nav--originalに@extendで.l-header__navを読み込む形になります❗️

[@pakkan-darake]

@@hirocode ご返信ありがとうございます！ ヒロコードさんもそうなんですね、 人それぞれかとは思いますが、そういうやり方もちゃんとあると知れて安心しました！

[@nasumi9595]

CSS設計に触れられたKZbin動画ってあまりない気がします。 CSSって実は奥深く、自由度が高すぎるが故に複雑なんですよね〜

[@hirocode]

ありがとうございます🙇‍♂️❕ 知れば知るほどその複雑さが見えてきますよね...😅 新しいプロパティ増えたりで便利にはなってきてますが、逆に初学者は何使えばいいか分からないみたいな感じにもなりそうですね😱

[@保護犬の柑橘柴犬のここあ]

Nuxt環境の現場になってからフロックス使わなくてなりましたなあ

[@まち-u1m]

初めまして！ 長いLP等のコーディングの際、 同じようなキャッチコピーが3セクション以上配置されているデザインに遭遇します。 同じような内容のセクションだけど見た目は違う場合、BEM規則におけるclass名はどの様に差別化するのでしょうか？

[@hirocode]

初めまして！コメントいただきありがとうございます😊♪ 複数箇所で同じデザインのキャッチコピーが使われている場合は、 .c-copy のように、パーツとして各所に配置するのが良いかと思います。 3つセクションがあり、それぞれ共通点が無い完全独立したデザインであればそれぞれ名称をつけるのが良さそうです。 .p-about, .p-feature, .p-priceなど 逆に、だいたい同じようなデザイン（上下の余白は同じで背景色が異なるとか）であれば、 .p-sectionのように共通のセクションを設け、その上で、.p-section--darkのようにmodifireを使ってパターン分けしていく形になりそうです。 もしくは、.p-section.u-bg--dark みたいに、utilityクラスを用意して変更を加える形もできるかと思います😆❕

[@un0517]

BEMでは基本的にエレメントのネストは特殊なケースを除いて一般的にはNGだと思いますが、私の知識が浅いだけでしょうか？

[@hirocode]

おっしゃる通りエレメントのネストは公式で非推奨のようです😵！ 今までネストOKでやってたので、見直したいと思います💦 ご指摘いただきありがとうございます🙇❕

[@Nyan-l3w]

こんにちは😃動画ありがとうございます♪現在WordPressの卒業課題に取り組む前に、頂いた初案件を優先して進めてやっと終わったところです。SCSSで記述しているものの、ただ上からダラダラと書いている感じがして、今後の保守管理上、つくづくBEMの考え方やFLOCSSが大切だと実感しました。慣れるまで少し戸惑いそうですが(⌒-⌒; )分割管理はWPの案件の際も親和性が高いでしょうね。 フリップで表示されていた画面は全部スクショしゃちゃいました😅ノートとってがっつりお勉強します。本当にありがとうございました

[@hirocode]

初案件おめでとうございます😊♪ やっぱり実際の経験があると、重要性とか実感できますよね😆❕ こちらこそ、ご視聴いただきありがとうございます🙇‍♂️

[@aoi5729]

ReactのプロジェクトをしているのですがFLOCSSとBEMに構成や具体的な記述法を教えて欲しいです！

[@masa_poeny]

updateとinsertで両方「set****」にしてるプロジェクトは見事炎上してた。

[@tinytale7902]

Reactとかは触ったことありますか？

[@hirocode]

コメントいただきありがとうございます😊♪ 以前Reactのプロジェクトに参加したことあって、環境構築やルーティングなどかなり苦戦した記憶があります😱 それ以来reactはほとんど触ってないです💦

[@きむまさと]

こんにちは。横スクロールのサイト作成ができそうならしていただけませんか？

[@hirocode]

ご要望いただきありがとうございます😊♪ちょっと検討してみます❕

[@かず-i8f8h]

拡張しやすいの文言が拡張子やすいになってますよ😢

[@hirocode]

ほんとですね😅ご指摘いただきありがとうございます🙇‍♂️!

[@早稲田生暇人]

Good

[@hirocode]

ありがとうございます🙇❕

[@mieumieu8417]

1年1組とか1年A組とか星組とか月組とかそういう話かと思ったら、ぜんぜんちがくて笑った。

[@hirocode]

😂😂😂