SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
SMACSS 読んだ - CHROMA
Scalable and Modular Architecture for CSS (日本語) を読んだのでそのメモです。 CSSルールのカテゴライズ カテゴライズを行い、それに準じた命名をセレクタに付ける。 ベース レイアウト モジュール 状態（ステート） テーマ レイアウトには1つ以上のモジュールを保持する必要がある。 モジュールは最利用可能なパーツとする。 命名規則 レイアウト、状態（ステート）、モジュールにはプリフィックスを使用する。 レイアウトのスタイルにはlayout-を付ける。または、ドキュメントなどでコーディング規約をまとめてあるなら省略してl-と付けても良い。 状態（ステート）にはis-を付ける。 モジュールは作成される数が多いので、モジュールごとにプリフィックスを付ける。 /* Example */ .comment { } .comment-user { } ベースル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
