デザインコンポーネントの命名規則にBEMを取り入れる｜yoshikawa akane
こんにちは、ソーシャル経済メディア「NewsPicks」の吉川（よっしー）です。 この記事は NewsPicks アドベントカレンダー 2023 の12日目の記事です。昨日はtakehiloさんによる『TCAでGithubリポジトリ検索アプリを作ってみよう』でした！ 前回、ダークモード対応のカラートークンについてまとめました。 今回のnoteのテーマは「コンポーネントの命名規則」です。コンポーネントを作るたびに地味に悩む命名に向き合ってみました。 「デザインデータの命名規則を決めたいけど考える時間がない」「実装との共通化は後回しで、整理しやすい構造にしておきたい」と考えている方に、参考の一つになれば幸いです。 BEMとはBEM（Block-Element-Modifier）は、ウェブ開発においてコードの構造化と保守性を向上させるために広く使用されている命名規則です。 Block（塊）：Pa
堅牢で保守的な最低限度の CSS 設計 - Qiita
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding （以降、BEM） 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component：Atoms Project：Molecules に分類します。 単語間の区切り
CSSのメンテナンスを向上させるコーディング設計の「FLOCSS」と「BEM」について考えてみる | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
ウェブサイトは完成してからも改修が行われることが前提ですので、コーディング時には拡張性や運用保守のしやすさ、またコードの読みやすさなどが重要になります。さらに大規模なサイトの場合ですと複数人で開発することもありますので、コーディングのルー…
【初学者向け】HTML/CSSでのclassの命名を考える 〜CSS設計（BEM）を学んでみよう〜 - Qiita
とかのアレ（hoge部分）です。 この投稿は HTMLやCSSは書けるけれど、使いこなすためにもう一歩勉強したい classの命名にいつも迷う 現場で使われている技術や知識を身に付けたい こんな人を対象に書いた、初学者向けの投稿です。 CSSの設計とBEMの非常に初歩的なところを解説していきたいと思います。 CSS設計の初歩的なところを考えてみる classの命名っていうけどidじゃだめなの？ Qiitaを覗いてるみなさんには当たり前のことかもしれませんが、一応このあたりから書いていきたいと思います。 HTMLおよびCSSにはclassとidの２種類の名前の付け方がありまして、その名前が一致するものを紐づけてスタイルを書いていきます。 classとidの違いは、ページ内に複数存在できる(class)かできない(id)かです。 なので、正直idだけでページを作ることも可能です。が、一般的には
CSS命名規則「BEM」を使うためのscss小技 - Qiita
※ 注意：各セレクターにはプロパティが入ってないとコンパイル結果には出てこないと思いますが、ここではすべて省略しています。 「&」で親セレクター継承 よくあるやつ
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を参考にした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をSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
BEM: A New Front-End Methodology — Smashing Magazine
This article is the sixth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts, the fourth covered a free plugin c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
