Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSSと仲良くなろう

159 views

Published on

社内勉強会用資料
BEMの基礎とCSSを組む際に気をつけたいこと

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

CSSと仲良くなろう

  1. 1. CSSと仲良くなろう
  2. 2. ⽬的 • BEMの理解を深める • BEMに沿った改修ができるようになる • 崩れにくいCSSを組めるようになる
  3. 3. おしながき • ⽬的 • BEMの説明 • アンチパターンと解決案 • その他、気をつけるポイント
  4. 4. BEMってなんだ?
  5. 5. BEMとは • CSSの命名規則のこと • Block-Element-Mofifierの略 • 基本的にシングルクラス • HTMLとCSSを疎結合にする
 (タグにはスタイルを当てない)
  6. 6. Block-Element-Modifier Block:独⽴して再利⽤できるもの(⾚) Element:Blockの構成要素(⻘、紫) Modifier:B-Eの状態が変わったもの(紫) ※サンプルSP会社詳細タブ
  7. 7. 書き⽅のルール • Eはアンスコx2区切り • Mはハイフンx2区切り • シングルクラス • タグにスタイルを当てない
  8. 8. BEMを使うと良いこと • コンポーネントの再利⽤性が⾼い • 読みやすい • クラス名の衝突が起こりづらい • 詳細度が上がらない • DOM構造に依存しない
  9. 9. アンチパターンと解決策
  10. 10. エレメントのみのコピペ 解決策 -> header-top__nav-dropdownを再定義する
  11. 11. ブロックの外側にエレメント 解決策 -> 別ブロックにする or ブロックを1つ親に設定
  12. 12. ブロックの密結合 解決策 -> 同じブロックにする
  13. 13. その他、気をつけるポイント
  14. 14. floatの解除 解除しないと⾼さが0になり崩れの原因に🐛 floatしたら必ずclearfixしましょう
  15. 15. 可変⻑の組み⽅ ⽂字数が増えたときにも崩れないか確認したい
  16. 16. 浮かせた要素が被る 兄弟要素なのに⽚⽅が覆いかぶさっている ボタンの下にテキストが⼊ってしまったり ⽚⽅が押せなくなるため被らないようにする
  17. 17. clickable、hoverableエリア 押せるエリアとホバーするエリアが違う 押せるエリアも注意しないと テキストしか押せないボタンなどが⽣まれてしまう ため注意が必要
  18. 18. 参考記事 • BEM を使うべき5つの理由(なぜ BEM が G.R.E.A.T といえるのか) - Frasco • BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 • 細かすぎるけど伝わってほしい私的BEMプラクティス30

×