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 は、独立しており再
ツクメモ的、CSSの命名規則、BEM（ベム）の使い方決定版！ | ツクメモ - ウェブやアプリをツクるヒトのメモ
どうも、もりさんです。 すっかり月一更新となってしまいました。 以前、CSSの命名規則について考えるという記事を書きましたが、実際にBEMを使用してみて、すごく良かったので、まとめてみます。 CSSの命名規則について考える BEM（ベム）について CSSの命名規則の一つで、Block（ブロック）、Element（エレメント）、Modifier（モディファイア）の略です。 Elementの前には_（アンダーバー）二つ、Modifierの前には-（ハイフン）二つで区切って、class名をつけます。 .block__element--modifier{ ... } これらの区切り（セパレータ）は、必ずしも二つである必要はありません。 しかし、class名を見るだけで、BEMを利用していると分かるので、二つにした方が良いと、考えています。 それ以外、名前のつけ方には、特に難しいことはありません。
BEM記法を自分なりに改良したいという思惑 - Qiita
※改良されました(2014/12/5) 巷で噂のBEM記法についてです。 BEMで書かれたクラスを始めて見た時に壮大な嫌悪感を感じたこともありますが、今ではなんやかんやで使いまくってるBEM。きっとそんな方が他にもいるはず。 BEMを使っているうちにセレクタのネストが嫌いになって、そのおかげでネストによるCSS優先度が引き起こす意図せぬスタイルのオーバーライドというしがらみから逃れられたり、CSSを修正したいHTMLの要素のクラスを見るだけでCSSのどこをいじればいいかが分かったりだとか、BEMの恩恵にありがたくも授かりながらも、なんでハイフンやらアンダーバーを2つもつなげなければいけないのか、他に方法はなかったのか、いや、あったはずだ！という思いを拭いきれない私は、個人的な開発ではBEMを改良して試行錯誤し、ベストな記法が見つけようという思惑にかられているのです。 ということで最近使い始
まさか!?IDを使ったCSS設計手法「SDI-CSS」 | yoshi44ever.com
計画性の無いCSSがプロジェクトを破綻させてきた。なんとかしてCSSに秩序を持たせたいが、記述の自由度の高さから下手なルールは逆に苦痛を与える。BEMなどの厳密な命名規則を強いるCSS設計が静かに破綻している中、もっと手軽に、直感的に書ける設計は無いのだろうか。本記事ではID属性を使ったスコープデザインのCSS設計「SDI-CSS」を紹介する。 BEMは好きですか？ 上記の質問はBEM占いと言って、好きと答えた人は仕事に真面目でルールを守る。好きじゃないと答えた人は直感的でズル賢い。どうです？当たってるでしょう？（BEM占いはもちろん私が考えました） BEMは実によくできたCSS設計手法で、BEMに従って記述する限りほとんど副作用のないCSSが出来上がります。これは素晴らしいことです。 しかしBEMのあまりにも詳細で省略を許さない命名規則を実践していると、まるで軍隊か刑務所で過ごしているよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
