# 命名规范

## 目录命名

```shell
# 项目文件夹: projectname
# 样式文件夹: css
# 脚本文件夹: js
# 样式类图片文件夹: img
```

## 图片命名

图片业务(可选) + ( `mod_` ) 图片功能类别(必选) + 图片模块名称(可选) + 图片精度(可选)

1. 图片业务

   ```js
   // pp_:拍拍
   // wx_:微信
   // sq_:手Q
   // jd_:京东
   ```
2. 图片功能类别

   ```js
   // mod_:是否公共,可选
   // icon:模块类固化的图标
   // logo:LOGO类
   // spr:单页面各种元素合并集合
   // btn:按钮
   // bg:可平铺或者大背景
   ```
3. 图片模块名称

   ```js
   // goodslist:商品列表
   // goodsinfo:商品信息
   // useravatar:用户头像
   ```
4. 图片精度

   ```js
   // 普清:@1x
   // Retina:@2x|@3x
   ```

业务交叉协作的时候,为了避免图片命名冲突，建议图片名加上业务和模块前辍，如拍拍侧和手Q侧的业务交叉合作时

```js
// 侧栏导航icon雪碧图命名
// pp_icon_mod_sidenav.png

// 处理高清图片的时候，命名应该加上图片相应的精度说明
// jdc_logo@1x.png
// jdc_logo@2x.png
```

## HTML/CSS文件命名

```js
// 确保文件命名总是以字母开头而不是数字
// 且字母一律小写，以下划线连接且不带其他标点符号

<!-- HTML -->
jdc.html
jdc_list.html
jdc_detail.html

<!-- SASS -->
jdc.scss
jdc_list.scss
jdc_detail.scss
```

## ClassName命名

`ClassName` 的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “\_” 连接

1. 命名原则

   ```HTML
   <!-- 祖先模块不能出现下划线，除了是全站公用模块，如 mod_ 系列的命名 -->
   <div class="modulename">
     <div class="modulename_info">
       <div class="modulename_son"></div>
       <div class="modulename_son"></div>
       <!-- ... -->
     </div>
   </div>
     
   <!-- 这个是全站公用模块，祖先模块允许直接出现下划线 -->
   <div class="mod_info">
     <div class="mod_info_son"></div>
     <div class="mod_info_son"></div>
     <!-- ... -->
   </div>

   <!-- 在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀 -->
   <div class="modulename">
     <div class="modulename_cover"></div>
     <div class="modulename_info"></div>
   </div>

   <!-- 当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块 -->
   <div class="modulename">
     <div class="modulename_cover"></div>
     <div class="modulename_info">
         <div class="modulename_info_user">
           <div class="modulename_info_user_img">
             <img src="" alt="">
             <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
             <div class="miui_tit"></div>
             <div class="miui_txt"></div>
             <!-- ... -->
           </div>
         </div>
         <div class="modulename_info_list"></div>
     </div>
   </div>
   ```
2. 模块命名

全站公共模块：以 `mod_` 开头

```html
<div class="mod_yours"></div>
```

业务公共模块：以 业务名 `_mod_` 开头

```html
<div class="paipai_mod_yours"></div>
```

1. 常用命名推荐

`ad` 、`banner` 、`gg` 、`guanggao` 等有机会和广告挂勾的字眠不建议直接用来做`ClassName` ，因为有些浏览器插件（ `Chrome` 的广告拦截插件等）会直接过滤这些类名

## 参考

1. [命名规范](https://guide.aotu.io/docs/name/dir.html)
2. [W3C](https://www.w3.org/)
3. [Apple Developer](https://developer.apple.com/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ougege.gitbook.io/blog/docs/articles/standards/ming-ming-gui-fan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.