CSSのコーディング設計について考える事 – YATのBLOG
CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
AngularjsでDirectiveを作るときに考えていること - ハードコイルド・ワンダーランド
最近、仕事や趣味でAngularjsのDirectiveを作る機会が何回かありました。Directiveは非常に強力な機能ですが、使い方を誤ると碌なことにならないので現在どのような方針でDirectiveを作っているのかを書きます。 いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会 イベントレポートでも触れられているように、ベストプラクティスが見つかっていない感じなので色々な人の意見を聞きたいです。 基本的な方針 可能な限りDirectiveは作らない DirectiveはAngularjsの中でも仕様が複雑で理解しづらく、ファイルが分散するので作るだけの明確な理由がないものについてはDirectiveにするべきではない。Angularjsはビルトインディレクティブが充実しており、大半の問題はこれを利用すれば解決する。無駄な重荷を負う必要はない
BEMの考え方を基にしたHTML / CSSのid・classの命名規則 - Qiita
概要 id・classの命名規則についてはGoogleのガイドラインや、BEMがあることで、ある程度指標ができておりますが、仕事で使うガイドラインを制作するにあたって、どのような形が望ましいのか、考えなおそうと思い、色々情報を集めていました。 BEMの考え方が個人的に良かったので、採用しようと思ったのですが、BEMは少し冗長になりがちなので、個人的にはそこを改善したいのと、無駄になりそうな要素はなるべく減らして行きたかったので、BEMの考え方を基に少しカスタマイズして、命名規則を思案しました。 記事も揃っておりますので、ここには特筆はしません。 簡単な説明のみとさせていただきます。 BEMとは？ 「Block」「Element」「Modifier」の頭文字。BEM（ベム）と呼びます。 Block / 構成のルートとなる親要素。 Element / Blockに付随する子要素。 Modifi
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つ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - juno/bem-methodology-ja: Japanese Translations of BEM-Methodology (BEMの日本語訳) http://bem.info/method/
