Тёмный

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

HIROCODE.
Подписаться 66 тыс.
Просмотров 25 тыс.
50% 1

CSSのクラス名に迷っている方必見!
クラス名の命名規則について紹介しています😆❕
🎥 この動画の構成 🎥
00:00 CSSクラス命名規則
00:24 良いクラス名とは?
03:18 FLOCSS(フロックス)について
06:30 BEM(ベム)について
08:32 FLOCSSとBEMの併用
✅ ご視聴いただきありがとうございます🙇‍♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
ru-vid.com?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋(アフィリエイト広告を使ってます!)
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン?
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#css #html #webデザイナー

Опубликовано:

 

22 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@hirocode
@hirocode Год назад
※動画内でElementのネスト(l-header__nav__item)はOKと説明していますが、公式では非推奨でした、申し訳ございません🙇 正しくは、.l-header__nav、.l-header__itemのような形になります!
@KentaroxKondo
@KentaroxKondo Год назад
公式のBEMドキュメントも読んでみましたが、公式だとmodifierとelementの間はシングルアンダースコア(_)で分ける、と紹介されていました。なので、block__element_modifierとなり、element同士のネストはNG・・・のような書き方だったと思います。 ただ、(ウェブデザイン歴はほとんどありませんが)仕事の関係先で見たCSSは、HIROさんが動画内で紹介されていた通りの設計手法になっていました。日本だと(公式のやり方に従わず)こちらのやり方を採用する場合が多いのですかね?🤔
@KentaroxKondo
@KentaroxKondo Год назад
en.bem.info/methodology/naming-convention/#modifiers 公式ドキュメントで、「Two Dashes style」という手法の紹介もあったようです。すみません!
@user-sn7hu8ig2l
@user-sn7hu8ig2l Месяц назад
BEMについて色々調べていて、良くわからなかったのですが、こちらの動画で腑に落ちました!ありがとうございました!
@hirocode
@hirocode Месяц назад
よかったです😆❗️ありがとうございます🙇❗️
@yoshi555
@yoshi555 Год назад
独学で頑張っている者です。 ちょうどcss設計について悩んでいた所でホントわかりやすい動画でした♪ 何度も見直して勉強頑張ります💪 ありがとうございます😊
@hirocode
@hirocode Год назад
嬉しいコメントいただきありがとうございます🙇❕独学応援してます😆❗️
@user-mq3jq7qk1h
@user-mq3jq7qk1h Год назад
これは永久保存版! 超ありがたい!! できたら1年前に知りたかったーー!!!😂笑
@hirocode
@hirocode Год назад
そう言っていただけて嬉しいです😆♪ ありがとうございます🙇‍♂️❕
@helvetica4605
@helvetica4605 Месяц назад
FLOCSSは過剰なんだよなぁ base, components, project, utils の4つを適切な順番で読み込めばcssが破綻することはないよね
@hirocode
@hirocode Месяц назад
わかります!特にlayoutsはなくても全然いけますね🤔
@KAIDSHU
@KAIDSHU Год назад
独学中の者です! クラス命名規則どうしようか悩んでいたところに、ヒロさんのこの動画のサムネ出てきて、秒でクリックしました😂 画像付きで丁寧な解説で本当に助かりました🙇🏻‍♂️ 毎日コツコツ積み上げ頑張ります💪🏻
@hirocode
@hirocode Год назад
コメントありがとうございます🙇‍♂️ タイムリーで動画出せてよかったです😆❕ 独学されてるんですね!応援してます😊♪ 僕ももっと参考になるような動画出せるように頑張ります💪
@sptlayzner
@sptlayzner Год назад
自分は OOCSS を土台に FLOCSS っぽい感じで制作しています。 CSS の表現力が上がり、ほぼ同じ HTML 構造で全く別の意匠にできるケースが多くなったので、 いろいろな面で使い回せて自分には合っています。 BEM は「ちょこっと違うもの」が積み重なると(しかも後出しで)管理などがなかなかに厳しく、 上手く使えれば良いんだろうけどなぁ、と思いつつ使えていません。
@hirocode
@hirocode Год назад
OOCSS使ったことなかったですが、これもオブジェクト指向の手法なんですね😲❕ BEMはComponentとProectの切り分けが結構曖昧な点があったりして、なかなか試行錯誤するところ多いですよね😅
@user-wc4kn7qt9w
@user-wc4kn7qt9w Год назад
Nuxt環境の現場になってからフロックス使わなくてなりましたなあ
@user-qk7pf9zk2y
@user-qk7pf9zk2y Год назад
初めまして! 長いLP等のコーディングの際、 同じようなキャッチコピーが3セクション以上配置されているデザインに遭遇します。 同じような内容のセクションだけど見た目は違う場合、BEM規則におけるclass名はどの様に差別化するのでしょうか?
@hirocode
@hirocode Год назад
初めまして!コメントいただきありがとうございます😊♪ 複数箇所で同じデザインのキャッチコピーが使われている場合は、 .c-copy のように、パーツとして各所に配置するのが良いかと思います。 3つセクションがあり、それぞれ共通点が無い完全独立したデザインであればそれぞれ名称をつけるのが良さそうです。 .p-about, .p-feature, .p-priceなど 逆に、だいたい同じようなデザイン(上下の余白は同じで背景色が異なるとか)であれば、 .p-sectionのように共通のセクションを設け、その上で、.p-section--darkのようにmodifireを使ってパターン分けしていく形になりそうです。 もしくは、.p-section.u-bg--dark みたいに、utilityクラスを用意して変更を加える形もできるかと思います😆❕
@nasumi9595
@nasumi9595 Год назад
CSS設計に触れられたRU-vid動画ってあまりない気がします。 CSSって実は奥深く、自由度が高すぎるが故に複雑なんですよね〜
@hirocode
@hirocode Год назад
ありがとうございます🙇‍♂️❕ 知れば知るほどその複雑さが見えてきますよね...😅 新しいプロパティ増えたりで便利にはなってきてますが、逆に初学者は何使えばいいか分からないみたいな感じにもなりそうですね😱
@user-ui6kz7rl1g
@user-ui6kz7rl1g Год назад
こんにちは😃動画ありがとうございます♪現在WordPressの卒業課題に取り組む前に、頂いた初案件を優先して進めてやっと終わったところです。SCSSで記述しているものの、ただ上からダラダラと書いている感じがして、今後の保守管理上、つくづくBEMの考え方やFLOCSSが大切だと実感しました。慣れるまで少し戸惑いそうですが(⌒-⌒; )分割管理はWPの案件の際も親和性が高いでしょうね。 フリップで表示されていた画面は全部スクショしゃちゃいました😅ノートとってがっつりお勉強します。本当にありがとうございました
@hirocode
@hirocode Год назад
初案件おめでとうございます😊♪ やっぱり実際の経験があると、重要性とか実感できますよね😆❕ こちらこそ、ご視聴いただきありがとうございます🙇‍♂️
@aoi5729
@aoi5729 11 месяцев назад
ReactのプロジェクトをしているのですがFLOCSSとBEMに構成や具体的な記述法を教えて欲しいです!
@pakkan-darake
@pakkan-darake 8 месяцев назад
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
@hirocode 8 месяцев назад
コメントいただきありがとうございます🙇 どちらかといえば複数付与する形が多いです。すみません、この動画では単一で指定する形になっていますが、どちらも試した結果、僕も現在は複数付与する形をとっています。 ちなみに単一で指定する場合は、 .l-header__nav--originalに@extendで.l-header__navを読み込む形になります❗️
@pakkan-darake
@pakkan-darake 8 месяцев назад
@@hirocode ご返信ありがとうございます! ヒロコードさんもそうなんですね、 人それぞれかとは思いますが、そういうやり方もちゃんとあると知れて安心しました!
@user-rt1rk6mx2r
@user-rt1rk6mx2r 7 месяцев назад
はじめまして、独学で勉強しているものです。 BEMとFLOCSSの併用について2点質問があります。 1点目が、ブロック名__エレメント名__エレメント名は、勉強した際に間違いというものも見ました。 ブロック名__エレメント名__エレメント名は、実際は記法的に問題ないのでしょうか? 自分の場合、ブロック名__エレメント名__エレメント名になりそうな場合は、新しくブロックを作ってブロック名__エレメント名としております。 2点目が、l-header__navとありますが、lはレイアウトのため装飾があるようなものはlとしない認識がありました。 l-header__navは実際には装飾などをしていくと思うので、p-header__navと作成すると思っておりました。実際はどうなのでしょうか? まだまだ、勉強が足りないため、合っているのか自信が持てないため、HIROさんの見解をお聞きしたいです。 以上、何卒よろしくお願い致します。
@hirocode
@hirocode 7 месяцев назад
コメントありがとうございます😊♪ 1点目、2点目共に認識間違いないです❗️混乱させてしまって申し訳ないです、むしろこの動画が間違ってます💦 この動画修正版作らないとですね😱
@user-rt1rk6mx2r
@user-rt1rk6mx2r 7 месяцев назад
@@hirocode お忙しい中早急に回答して頂きありがとうございます。認識あっていてよかったです。今後とも勉強させて頂くので何卒よろしくお願い致します。
@masa_poeny
@masa_poeny Год назад
updateとinsertで両方「set****」にしてるプロジェクトは見事炎上してた。
@un0517
@un0517 Год назад
BEMでは基本的にエレメントのネストは特殊なケースを除いて一般的にはNGだと思いますが、私の知識が浅いだけでしょうか?
@hirocode
@hirocode Год назад
おっしゃる通りエレメントのネストは公式で非推奨のようです😵! 今までネストOKでやってたので、見直したいと思います💦 ご指摘いただきありがとうございます🙇❕
@tinytale7902
@tinytale7902 Год назад
Reactとかは触ったことありますか?
@hirocode
@hirocode Год назад
コメントいただきありがとうございます😊♪ 以前Reactのプロジェクトに参加したことあって、環境構築やルーティングなどかなり苦戦した記憶があります😱 それ以来reactはほとんど触ってないです💦
@user-kf4ub7nh5y
@user-kf4ub7nh5y Год назад
Good
@hirocode
@hirocode Год назад
ありがとうございます🙇❕
@user-um4pu1jq2z
@user-um4pu1jq2z Год назад
こんにちは。横スクロールのサイト作成ができそうならしていただけませんか?
@hirocode
@hirocode Год назад
ご要望いただきありがとうございます😊♪ちょっと検討してみます❕
@mieumieu8417
@mieumieu8417 Год назад
1年1組とか1年A組とか星組とか月組とかそういう話かと思ったら、ぜんぜんちがくて笑った。
@hirocode
@hirocode Год назад
😂😂😂
@user-tw3fv5up8c
@user-tw3fv5up8c Год назад
拡張しやすいの文言が拡張子やすいになってますよ😢
@hirocode
@hirocode Год назад
ほんとですね😅ご指摘いただきありがとうございます🙇‍♂️!
Далее
СПАЛИЛА МАМЕ СТАРШУЮ СЕСТРУ
00:23
НРАВИТСЯ ЭТОТ ФОРМАТ??
00:37
Просмотров 1,3 млн
Why I use the BEM naming convention for my CSS
7:03
Просмотров 207 тыс.
ReactでCSS書くならどれ使う?
18:16
Просмотров 9 тыс.
СПАЛИЛА МАМЕ СТАРШУЮ СЕСТРУ
00:23