class選擇器命名基本規則

以字母開頭，全部字母小寫

盡量簡短、明確

單個名字如果由多個詞組成，單詞間以下劃線_連接

...

層級關系以中劃線-連接

...

<text class="notice-title"> ... </text>

繼承式命名

為了保證我們設計的class樣式既能重復利用，又能避免沖突。我們采用繼承式來給class樣式命名。

每個頁面一般都可以分成幾個模塊，我們把每個模塊最外層的class名作為祖先，模塊內部的class樣式名用祖先名作為前綴，它們以中劃線-連接。（通過這種方式來表示class樣式的作用域）

  // home是祖先模塊，user和event是home的直接子模塊
  <view class="home">
    <view class="home-user">
      // 用戶信息
    </view> 
    <view class="home-event">
      // 動態詳情
    </view> 
  </view>

在頁面結構里，模塊內部可以有子模塊，子模塊下面可以有孫子模塊，以此類推。class樣式命名也按這個層級。

  // home是祖先模塊，user和event是home的直接子模塊
  // user下面又有兩個子模塊name和signature
  <view class="home">
    <view class="home-user">
      <view class="home-user-name">
        // 用戶信息
      </view>
      <view class="home-user-signature">
        // 個性簽名
      </view> 
    </view> 
    <view class="home-event">
      // 動態詳情
    </view> 
  </view>

縮寫

當頁面結構復雜，層級過多，樣式名的前綴就會太多太長，我們需要對前綴進行縮寫。

當樣式名的前綴太多(一般超過2個)或太長，我們把每兩個前綴作為一組，取每個前綴的第一個字母合在一起組成新的前綴，前綴與前綴或class樣式之間以中劃線-連接。縮寫時要保證新的前綴具有唯一性和可辨識性。

  // home是祖先模塊，user和event是home的直接子模塊
  // user下面又有兩個子模塊name和signature
  <view class="home">
    <view class="home-user">
      // hu就home-user的縮寫
      <view class="hu-name">
        // 用戶信息
      </view>
      <view class="hu-signature">
        // 個性簽名
      </view> 
    </view> 
    <view class="photos-desc">
      // he 是photos-desc縮寫
      <view class="he-photos">
        <image class="he-photos-image" src="..."></image> 
        <view class="he-photos-desc">
          // pd 是photos-desc的縮寫
          <text class="he-pd-text">...</text>
        </view>
      </view> 
      <view class="he-video">
        ...
      </view> 
    </view> 
  </view>

<!-- ... -->

常用命名推薦

ClassName 含義
about 關于
account 賬戶
arrow 箭頭圖標
article 文章
aside 邊欄
audio 音頻
avatar 頭像
bg,background 背景
bar 欄（工具類）
branding 品牌化
crumb,breadcrumbs 面包屑
btn,button 按鈕
caption 標題，說明
category 分類
chart 圖表
clearfix 清除浮動
close 關閉
col,column 列
comment 評論
community 社區
container 容器
content 內容
copyright 版權
current 當前態，選中態
default 默認
description 描述
details 細節
disabled 不可用
entry 文章，博文
error 錯誤
even 偶數，常用于多行列表或表格中
fail 失敗（提示）
feature 專題
fewer 收起
field 用于表單的輸入區域
figure 圖
filter 篩選
first 第一個，常用于列表中
footer 頁腳
forum 論壇
gallery 畫廊
group 模塊，清除浮動
header 頁頭
help 幫助
hide 隱藏
hightlight 高亮
home 主頁
icon 圖標
info,information 信息
last 最后一個，常用于列表中
links 鏈接
login 登錄
logout 退出
logo 標志
main 主體
menu 菜單
meta 作者、更新時間等信息欄，一般位于標題之下
module 模塊
more 更多（展開）
msg,message 消息
nav,navigation 導航
next 下一頁
nub 小塊
odd 奇數，常用于多行列表或表格中
off 鼠標離開
on 鼠標移過
output 輸出
pagination 分頁
pop,popup 彈窗
preview 預覽
previous 上一頁
primary 主要
progress 進度條
promotion 促銷
rcommd,recommendations 推薦
reg,register 注冊
save 保存
search 搜索
secondary 次要
section 區塊
selected 已選
share 分享
show 顯示
sidebar 邊欄，側欄
slide 幻燈片，圖片切換
sort 排序
sub 次級的，子級的
submit 提交
subscribe 訂閱
subtitle 副標題
success 成功（提示）
summary 摘要
tab 標簽頁
table 表格
txt,text 文本
thumbnail 縮略圖
time 時間
tips 提示
title 標題
video 視頻
wrap 容器，包，一般用于最外層
wrapper 容器，包，一般用于最外層

總結

以上是生活随笔為你收集整理的微信小程序开发规范文档-WXML类选择器(class)命名规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。