【CSS】BEMの命名ルールのポイント。あまりにも長くなる場合は、新しい名前を付ける
FLOCSSなどBEMの命名ルールに従って名前を付けていく場合は、要素の中の要素のように深い階層にある要素につける名前がとても長くなってしまうことがあります。 そんなときは、長いクラス名をそのまま使うのではなく、親要素の名前は残して、わかりやすい新たな名前をつけるできです。 ここではその方法を実例で解説しています。 BEMの命名ルールの基本 初めにBEMの命名ルールをサラッとおさらいしておきます。 １つの機能を持った塊であるブロック（モジュール）は「__（アンダーバー２つ）」でつなぎます。（例： p-review__wrapper) 色やフォントサイズを変えるといった小変更（モデファイヤー）は「–（ハイフン２つ）」でつなぎます。（例： p-review__wrapper–red) なお、単に連続した単語どうしは「-（ハイフン１つ）」でつなぎます。（例： quality-control) そ
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法
未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
HTML・CSSの設計にBEMを取り入れてみよう！ | Tech dig
HTMLのクラス名を好き勝手書いてしまうと、共同での開発がしづらかったり、別の人がコードを修正しづらくなってしまいます。 複数の人が手を加えるHTMLやCSSを書く場合、設計手法を取り入れて皆が読みやすい、後から改修しやすい設計にするように心がけましょう。 その設計手法にはいくつか種類がありますが、今回はBEMについて解説していきます。 BEMとは Block、Element、Modifierの頭文字をとって、BEM（ベム）という名前になっています。 BEMは独特なクラス名を使用するので、初めて見る人は「うっ」と思うかもしれません。 しかし、クラス名でサイトの構造がある程度分かるため、慣れるととても便利な設計手法です。 BEMの書き方 BlockとElementはアンダースコア（_）二つでつなぎます。 ElementとModifier（もしくはBlockとModifier）はハイフン（-）
クラス命名規則 | クラス名（クラス設計）ルール | 吉本式BEM設計（BEM設計ベース）
クラス命名規則 : クラス名（クラス設計）ルール ここからが吉本式BEM設計（BEM設計ベース）のメインになります。 まずは、基本設計についてですが、ベースとなる考え方はBEM設計となります。 BEM設計について知識がない場合、とても素晴らしい概念ですので、ぜひ習得してください。 ここではBEM設計については詳しく解説しません。 ある程度知識がある、または実務でBEM設計で構築しているというマークアップエンジニアをターゲットとします。 少しだけここで（吉本式BEM設計（BEM設計ベース）的に）解説すると、BEM設計とは「ブロック（Block）」「エレメント（Element）」「モディファイア（Modifier）」の3つの概念があります。 ブロック（Block） いくつかのエレメントで構成されたアウトライン要素。この要素は、独立されており、ページのどこに配置しても機能する（CSSが正しく機能
一番詳しいCSS設計規則BEMのマニュアル - Qiita
一番詳しい(当社比) この記事は 大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注 多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球 の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている SCSSを使用する 基本的に
BEMによるCSS設計の方法を解説。命名規則から使い方まで
BEMとは BEMは命名規則など、CSS設計の考え方のアイデアのことです。（構成案） BEMはBlock, Element, Modifierの頭文字をとったものです。 BEM 公式サイトの文章を引用します。 BEM Quick start BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copyin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
