TIL 36|★茶屋登録ページ6(BEM)を作成

3614 ワード

星茶屋の登録ページを作成したときに見つけたBEMを書きます。

BEM(Block Element Modifier)

BEMは

HTMLクラス属性の書き方

要素部分:要素の一部をUnderscore(Lodash)記号で表す

要素--状態:要素の状態をHypen(Dash)記号で表す

<div class="container">
     <div class="name"></div>
     <div class="item">
            <div class="name"></div>
      </div>
    </div>

classを選択した場合。container .item>そうすると、itemのサブエレメントnameも選択になります

だから生まれた命名法:要素部分case

<div class="container">
     <div class="container__name"></div>
     <div class="item">
            <div class="item__name"></div>
      </div>
    </div>

そこで生まれた命名法:要素--状態case

通常ボタン:<div class="btn primary"></div> -> <div class="btn btn--primary"></div>

完了ボタン:<div class="btn success"></div> -> <div class="btn btn--success"></div>

削除ボタン:<div class="btn error"></div> -> <div class="btn btn--error"></div>

Reference

この問題について(TIL 36|★茶屋登録ページ6(BEM)を作成), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonbee/TIL-36-다방-랜딩페이지-만들기6BEM

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

NODEJSでREDISから始める

Spring boot redisのリスナーの構成