タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

bemとCSS設計に関するakira_maruのブックマーク (2)

  • BEM を使うべき5つの理由(なぜ BEM が G.R.E.A.T といえるのか) - Frasco

    CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね?そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element(アンダースコアが2つ)、そして最後に Modifier が続きます(ダッシュが2つ)。 画像1:BEM で命名されたコンポーネントの例 Block(ブロック) Block は、独立しており再

    BEM を使うべき5つの理由(なぜ BEM が G.R.E.A.T といえるのか) - Frasco
  • BEMを参考にしたCSS設計 - Qiita

    現時点でBEMによるCSS設計はベターだと思う。でもベストではない。 なにがベストに思わせないのかと言えば冗長的な命名方法。これだけ。 アンスコやらスラッシュが2連続くところが嫌すぎて困る。 というわけで。 BEMの命名方法をカスタマイズしてみる。 BEMの基設計 BEMとは Block ⇒ 塊 Element ⇒ 要素 Modifier(keyとvalueで表す) ⇒ 状態(変化) の事を言う。 BEM(ベム)と呼ぶようだが、某妖怪人間ではない。 参考:知っておきたいHTMLテンプレート設計法 - OOCSSの基 | CodeGrid BEMのお約束 BlockとElementの区切りはアンスコ2個(__) BlockまたはElementとModifierの区切りはハイフン2個(--) ModifierのKeyとValueの区切りはアンスコ1個(_) BlockやElementを2つ

    BEMを参考にしたCSS設計 - Qiita
  • 1