css命名规则参考

css 命名规范可以避免不必要的样式冲突，命名可以参考 BEM 规范，以下是从网上收集整理过的一些规则，写样式再也不怕想不出来用什么 className 了！！

1. 页面结构命名

page  // 代表整个页面，用于最外层。
container  // 一个整体模块的容器，用于最外层，比如上下布局header-container和main-container
wrapper  // 某个页面外围控制整体布局宽度，比如单个vue页面的最外层，弹出框的最外层，某个抽离的组件的最外层
wrap  // 外套，某一小块元素功能包在一起的一个外围包，比如输入框的外围包
box // 某块区域盒子的外层，比如header-container容器中有查询块，操作按钮块
head|header  // 页头区域，用于头部
nav  // 导航条
content  // 内容，网站中最重要的内容区域，用于网页中部主体
main  // 网站中的主要区域（表示最重要的一块位置），用于中部主体内容
column  // 栏目
sidebar  // 侧栏
foot|footer  // 页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部
left|right|center  // 左右中

2. 导航命名

nav|navbar|navigation|nav-wrapper  // 导航条或导航包，代表横向导航
topnav  // 顶部导航
mainbav  // 主导航
subnav  // 子导航
sidebar  // 边导航
leftsidebar|sidebar_l  // 左导航
rightsidebar|sidebar_r  // 右导航
title  // 标题
summary  // 摘要
menu  // 菜单，区域包含一般的链接和菜单
submenu  // 子菜单
drop  // 下拉
dropmenu  // 下拉菜单
links  // 链接菜单

3. 功能命名

logo  // 标记网站logo标志
banner  // 标语、广告条、顶部广告条
login  // 登陆，（例如: 登录表单 form-login）
loginbar  // 登录条
register  // 注册
tool|toolbar  // 工具条
search  // 搜索
searchbar  // 搜索条
searchlnput  // 搜索输入框
shop  // 功能区，表示现在的
icon  // 小图标
label  // 商标
homepage  // 首页
subpage  // 二级页面子页面
hot  // 热门热点
list  // 文章列表，（例如: 新闻列表 list-news）
scroll  // 滚动
tab  // 标签
sitemap  // 网站地图
msg|message  // 提示信息
current  // 当前的
joinus  // 加入
status  // 状态
btn  // 按钮，（例如: 搜索按钮可写成  btn-search）
tips  // 小技巧
note  // 注释
guild  // 指南
arr|arrow  // 标记箭头
service  // 服务
breadcrumb  // (即页面所处位置导航提示）
download  // 下载
vote  // 投票news  // 新闻
siteinfo  // 网站信息
partner  // 合作伙伴
link|friendlink  // 友情链接
copyright  // 版权信息
siteinfoCredits  // 信誉
siteinfoLegal  // 法律信息

4. CSS 样式文件名

index.css //  一般用于首页建立样式
head.css //  头部样式，当多个页面头部设计风格相同时使用。
base.css //  共用样式。
style.css // 独立页面所使用的样式文件。
global.css // 页面样式基础，全局公用样式，页面中必须包含。
layout.css // 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
module.css // 模块，用于产品类页，也可与其它样式配合使用。
master.css // 主要的样式表
columns.css // 专栏样式
themes.css // 主体样式
forms.css // 表单样式
mend.css // 补丁，基于以上样式进行的私有化修补。
print.css // 打印

5. 注意事项

1）一律小写;
2）尽量使用英文;
3）多个单词用kebab-case规则加短横分隔;
4）如果有缩写，需要使用言简意赅的缩写单词代表；

6. 元素类名示例

// 使用BEM命名约定，块（block）、元素（element）、修饰符（modifier）

.my-btn {} // 表示某个块的元素
.my-btn.is-active {} // 表示某个块的元素的不同的状态
.my-btn__inner {} // 表示某个块的元素的子元素

// 表示某个块的元素不同的类型，以下几种写法都可以
.my-btn--primary {}
.my_btn--primary {} 
.my_btn--primary {}

7. 注释规范

1）文件顶部注释（推荐使用）
   /*
    * @description: 说明
    * @author: 张三
    * @update: zhangsan (2021-04-13 18:32)
    */

2）模块注释
    /* module: module1 by 张三 */
    …
    /* module: module2 by 张三 */
    // 模块注释必须单独写在一行

3）单行注释
    /* this is a short comment */

4）多行注释
   /*
    * this is comment line 1.
    * this is comment line 2.
    */

5）特殊注释

    /* TODO: xxxx by name 2013-04-13 18:32 */
    //用于标注修改、待办等信息

6）区块注释
    /* Header */
    /* Footer */
    /* Gallery */
    // 对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。