先端領域のBEMとは何か

6745 ワード
css 先端工程化
CSS Modulesとは何ですか.なぜ彼らが必要なの?の末尾に、CSS ModulesはBEMを必要としないことを明確に指摘していますが、BEMとはいったい何なのでしょうか.
次はBEM公式サイトのチュートリアルを翻訳して、先端分野のBEMが何なのかを明らかにします.
BEM-Block Element Modfier(ブロック要素エディタ)は、多重化可能なフロントエンドコンポーネントとフロントエンドコードを作成するのに役立ちます.
次の3つの特性があります.
  • 使いやすさBEMを使いたい場合は、BEMネーミング仕様を採用するだけで
    • になります.
  • ユニット独立ブロックとCSSセレクタにより、コードの再利用とユニット化が可能になります.
  • BEMを柔軟に使用した後、方法とツールはあなたの好きな方法で
    • を組織し、構成することができます.
    次に、BEMとは一体何なのかを3つの側面から分析します.
  • 紹介
    • BEMは高可用性で、強力で、簡単な命名規範であり、フロントエンドコードをより読みやすく、理解しやすく、他人と協力しやすく、拡張しやすく、より強く、明確にすることができ、肝心なのはより厳格である.
  • 名前
    • BEMの方法では,Webサイトの開発に参加するすべての人が,1つのコードライブラリを使用し,同じ言語を使用できることを確保できる.BEM形式のネーミング仕様を使用すると、必要に応じて変更できます.
  • FAQ
  • なぜ意味化されたラベルを適用せずにブロック要素にCSS classを追加するのか.
  • 私はbuttonのようにbuttonの方法でラベルとclassを同じセレクタに組み合わせますか?


    • もっと疑問があるなら、FAQリストを見ることができます!
    紹介する
    ミニマニュアルのウェブサイトでは、あなたのスタイルをどのように組織するかは通常大きな問題ではありません.そこに入って、CSSを書いたり、SASSを書いたりします.SASSの生産設定でスタイルシートにコンパイルし、それを集約し、モジュール内のすべてのスタイルシートをきれいなパッケージにします.
    しかし、より大きく、より複雑なプロジェクトに関連する場合、コードを組織する方法には少なくとも以下の3つの方法が効率を高める鍵です.コードを書くのにどれくらいの時間がかかり、どれだけのコードを書くか、ブラウザがどれだけのロードをしなければならないかに影響します.チームと協力し、高性能が不可欠な場合、これは特に重要になります.
    これは、レガシーコードを使用する長期的なプロジェクトにも同様です(従来のCSSを拡張および維持するためにSassとSMACSSを使用する方法を参照).
    方法は現在、CSSの占有スペースを減らし、プログラマー間の協力を組織し、大規模なCSSコードライブラリを維持する方法がたくさんあります.これはTwitter、Facebook、Githubなどの大規模なプロジェクトで明らかですが、他のプロジェクトは通常すぐに「巨大なCSSファイル」状態に成長します.
  • OOCSS用CSS「オブジェクト」でコンテナとコンテンツを区切る
  • SMACSSスタイルガイドCSSルールを記述する5つのカテゴリ
  • SUITCSS構造化クラス名と有意義なハイフン
  • 原子様式を原子又は分割不能部分
    • に分解する.
    どうしてBEMは他の人よりいいの?プロジェクトでどの方法を使用するかにかかわらず、CSSとUIをより構造化するメリットがあります.いくつかのスタイルはそんなに厳しく柔軟ではありませんが、他のいくつかはチームを理解しやすく、適応しやすいです.
    私がBEMを選択して他の方法を採用しない理由は、他の方法(すなわちSMACSS)よりも混同しやすいが、私たちが望む良好なアーキテクチャ(すなわちOOCSS)と識別可能な用語を提供しているからである.
    Mark McDonnell,BEMメンテナンス可能なCSS
    Blocks、Element、ModifierはBEMが方法論の重要な要素であるBlock、Element、Modifierの略語を聞いて、驚くことはありません.BEMの厳密な命名規則はここで見つけることができます.
  • ブロック
  • 独立したエンティティは、それ自体に意味があります.
  • 例header,container,menu,checkbox,input
  • 構成部品
  • ブロックの一部は、独立した意味を持たず、そのブロックに意味的に関連している.
  • 例menu item,list item,checkbox caption,header title
  • 修正
  • ブロックまたは要素のフラグ.それらを使って外観や動作を変更します.
  • 例disabled,highlighted,checked,fixed,size big,color yellow

    • BEMを使用する要素を深く理解すると、Githubのbuttonです.
    普通のボタンを使って普通の状況に対応し、2つの異なる状況に対応することができます.BEMを使用してBlockにclassをバインドしたので、使用したいラベルで実現することができます.(button,a甚だしきに至ってはdiv).しかし、命名規則はblock-modifier-valueの構文を使用する必要があることを示しています.HTML:

    CSS: 
    .button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

    メリット:
  • ユニット性
    • ブロックのスタイルは、ページの他の要素に依存しないため、カスケードの問題には遭遇しません.完了したプロジェクトのブロックを新しいプロジェクトに移すこともできます.
  • 再利用性
    • 異なる方法で独立したブロックを組織し、スマートに再利用することで、維持する必要があるCSSコードの量を減らすことができます.一連のスタイルガイドを通じて、ブロックライブラリを構築し、CSSを超効率的にすることができます.
  • 構造化
    • BEMメソッドは、CSSコードの構造性を向上させ、より理解しやすくすることができます.
    『Why BEM?』を広げて読むin a nutshellMindBEMding — getting your head ’round BEM syntaxCSS guidelinesBEM methodology for small projectsBEM It! for BrandwatchUsed and Abused — CSS Inheritance and Our Misuse of the Cascade.Objects in Space — A style-guide for modular SASS development using SMACSS and BEMHow to Scale and Maintain Legacy CSS with Sass and SMACSSBuilding a modular My Health Skills with BEM and SassBuilding My Health Skills — Part 3
    ケーススタディ:「既存のプロジェクトをBEMに移行する方法」をできるだけ早く書きたいと考えています.同時に、Nicole Sullivanの素晴らしいスピーチ「CSSプリプロセッサのパフォーマンス」を見ることができます.彼女は多くのサイトで発生した問題をよく概説し、これらの問題を追跡し、処理する方法を提供した.
    名前を付ける
    コンピュータ科学の分野では、キャッシュの無効化とネーミングの2つの非常に難しい問題しかありません.-Phil Karlton
    良いスタイルガイドマニュアルは、開発の速度、debugの速度、および既存のコードで新しい機能を完了する効率を著しく向上させます.しかし、残念なことに、ほとんどのCSSコードは開発中に構造と命名の規範がありません.長期的に見れば、これは最後に生成されたCSSコードライブラリのメンテナンスを困難にする.
    BEMメソッドは、同じWebサイトの開発プロジェクトに参加しているすべての人が、コード規範に基づいて開発することを確保し、チームメンバーがお互いのコードを理解するのに非常に有利であり、後続のプロジェクトを引き継ぐ学生にとっても良いことです.
    Block
  • は、自分だけに意味のあるエンティティをカプセル化します.blocksがネストされ、互いにインタラクティブになることができるとき、意味的には彼らは等価です.階層関係はありません.DOMで表されるエンティティ全体がありません.(例えばコントローラやモデルはブロックであってもよい)
  • Naming Blockの名前には、アルファベット、数字、句点が含まれています.完全なCSS classを組み合わせると、短い接頭辞を追加することができます.block
  • HTMLの任意のDOMノードは、class名を受け入れる限りBlockとして使用できます.
    ...
  • CSS
  • class名セレクタ
    • のみ使用
  • ラベル名またはid
    • はありません.
  • 同じページで、他のblockやelement
    • に依存しない
  • 例えば.block {color:#042;}
    • .

    Element
  • Blockの一部は、それを独立して取り出すと、実際の意味がありません.どの要素も意味的には独自のblockで密接につながっています.
  • Naming Elementの名前には、アルファベット、数字、句点、下線が含まれます.CSS class名はblock名から2つの下線を付けてelementを加えた名前で、最後にブロック名に組織されます.
  • HTML Block内のDOMノードはすべてelementです.既知のblockでは、すべてのelementは意味的に等しい.
    •
  • CSS
  • class名のみ選択セレクタ
  • ラベル名またはid
    • がない
  • 現在のページの他のblockまたはelement
    • に依存しない

    Good 
    .block__elem{color:#042};

    Bad 
    .block .block__elem {color:#042;}
div.block__elem {color:#042;}

    Modifier
  • blockまたはelementのflag.スタイル、動作、またはステータスを変更するには、彼らを使用します.
  • Naming Modifierの名前には、アルファベット、数字、句点、下線が含まれます.CSSのclassは、blockまたはelement名の後に付ける--で構成することができる.block--modまたは.block__Elem--mod,および.block--color-black .block--color-red.複雑なmodifierでは、スペースの代わりに短い線が使われています.

    • -HTML Modifierはblockまたはelement class名の後に追加されたclass名です.変更を担当するblocksまたはelementsにのみclassを追加し、既存のclassを維持します.Good 
    ...
    

    ...

    Bad 
    ...

    CSS
  • はmodifierクラス名をセレクタとして用いる.block--hidden { }
  • blockレベルのmodifierに基づいて要素を修正する.block--mod .block__elem { }
  • 要素モディファイヤ.block__elem--mod { }

    • 例:form Blockがmodifier:theme:“xmas”およびsimple:trueおよびelement:inputおよびsubmitであると仮定し、submit自身のmodifierはdisabled:trueである.HTML:

    CSS:

    .form {}
.form--theme-xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}
    2020ブルーブリッジカップ省大会B組C+(第1試合)本題
    html+cssソースコードのログインポップアップマスク効果を実現