[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
QQtabBarからのBEM
まず、BEMとはどういう意味でしょうか?
BEMとは、ブロック、エレメント、モディファイアの意味で、CSSの命名規則としてYandexチームが提唱したフロントエンドの命名方法である
Weui-primary_loading__dot: ライブラリ名-コンポーネント名-状態名-要素名
ライブラリ名:各社で一般的に合意されている。
コンポーネント。一般的に、特定のタグを修正するための個別のCSSを作成するために使用されます。
状態。一般に、タグが置かれている状態、または相互作用できる効果にちなんで名付けられる
要素名:一般にタグの役割の説明から命名される。
BEMのメリット
使いやすさ BEMを使いたい場合、BEMの命名規則を採用すればよい。
BEMについてもう少し詳しく
B(ブロック):ブロック
ブロック 再利用可能な、機能的に独立したページ構成要素
ブロック名は、その状態(赤やサイズ)ではなく、目的("それは何ですか"機能ライブラリやコンポーネント)を説明します。
- ブロックはその環境に影響を及ぼしてはいけません。つまり、ブロックに外部ジオメトリ(エッジ)や位置決めを設定してはいけないということです。
- BEMを使用する場合、CSSタグやIDセレクタも使用してはならない
E(要素):要素
要素(ELement):ブロックの合成部分。要素は文脈に依存する:属するべきブロックの文脈の中にあるときのみ意味を持つので、単独では使用できない。
要素名は、その状態("どのようなタイプか、またはどのように見えるか?"赤い、大きいなど)ではなく、何に使われるか("これは何か?" アイテム、テキストなど)を説明するものです。
M(モディファイア):モディファイア
ブロックや要素の外観、状態、動作を定義する実体
どのように見えるかを記述する("どのサイズ?"や"どのテーマ?など)
BEMを理解したら、どのように使うべきかを考える必要があります。
- ブロックの作成:コードの一部が再利用可能で、他のページコンポーネントの実装に依存しない場合。
- 要素を作成:コードの中で役割を果たす説明の下に作成したブロックの下で使用します。
- モディファイアの作成:要素の特性を変更する必要がある場合。qqアプリのバー構造を解析する
全体として、彼は4つの小さなブロックを含む大きなブロックで、それぞれが3つの要素を含んでいます。
ブロック appBar
小型ブロックアイテム
アイコンアイコン
タグデスク
ドットポインタ
<div class="qqui-appBar">
<a href="#" class="qqui-appBar__item qqui-appBar__item_on">
<span>
<i class="iconfont icon-icon-test1 icon_on"></i>
<span class="qqui__pointer qqui__pointer_on">1</span>
</span>
<p class="qqui__desc qqui__desc_on">message</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test2"></i>
<span class="qqui__pointer"></span>
</span>
<p class="qqui__desc">contact</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test"></i>
<span class="qqui__pointer"></span>
</span>
<p class="qqui__desc">watch</p>
</a>
<a href="#" class="qqui-appBar__item">
<span>
<i class="iconfont icon-icon-test3"></i>
<span class="qqui__pointer qqui__pointer_oOn"></span>
</span>
<p class="qqui__desc">dynamic</p>
</a>
</div>
* {
padding: 0;
margin: 0;
}
a:link {
color: #b0b3bf;
}
a:vistied {
color: #b0b3bf;
}
a:hover {
color: #2ec4fc;
}
a:active {
color: #2ec4fc;
}
a i.iconfont {
display: inline-block;
width: 36px;
height: 36px;
overflow: hidden;
margin-bottom: 3.5px;
font-size: 36px;
}
a i.icon_on{
color: #2ec4fc;
}
.qqui-appBar {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
z-index: 500;
background-color: #f9f9f9;
}
.qqui-appBar .qqui-appBar__item {
flex: 1;
text-align: center;
padding-top: 25px;
font-size: 0;
color: #b0b3bf;
text-decoration: none;
}
.qqui-appBar__item>span{
display: inline-block;
position: relative;
margin-bottom: 9px;
}
.qqui-appBar .qqui__desc {
font-size: 18px;
text-align: center;
line-height: 18px;
margin-bottom: 13px;
}
.qqui-appBar .qqui__desc_on{
color: black;
}
.qqui-appBar .qqui__pointer{
position: absolute;
top: -2px;
right: -2px;
width: 20px;
height:20px;
display: inline-block;
line-height: 18px;
color: white;
border-radius: 50%;
font-size: 10px;
}
.qqui-appBar .qqui__pointer_on{
background-color: #F43539;
}
.qqui-appBar .qqui__pointer_oOn{
width: 12px;
height: 12px;
line-height: 12px;
background-color: #F43539;
}
最終結果画像
上記のアイコンは、Aliアイコンライブラリから引用しています: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
ダウンロード方式で、上記URLからダウンロードしてください。そして、cssとして持ってきて、クラス名で追加します。
QQtabBarのCSS命名規則BEMについては、この記事がすべてです、より関連するCSS命名規則BEMの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、あなたは将来的にもっとスクリプトハウスをサポートしてくれることを願っています!。
関連
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る
-
[CSSチュートリアル】背景画像画面の適応的な実装を実現するCSS
-
[CSSチュートリアル】ホバードロップダウンメニュー方式を実現するCSS
-
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS
-
[CSSチュートリアル】cssのボックスモデルを解説 余白のパディングと省略について
-
[CSSチュートリアル】CSSスタイルをプログラムで処理するサンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例
-
[CSSチュートリアル】パララックススクロールの効果を完成させるCSS
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード