前端 class命名

常见class关键词：

类型	元素名	类型	元素名
元素项	-item	元素头部	-hd
元素标题	-title	元素内容	-cont
元素底部	-btm	元素顶部	-top
元素中部	-middle	元素右则	-right
元素左则	-left

制定简单规则：

修饰关键词

行为修饰符

如：修饰按钮在鼠标经过的事件，鼠标经过行为修饰符用-hover，所以全名为：ui-btn-hover

类型	修饰符名	类型	修饰符名
鼠标经过	-hover	获取焦点	-focus
失去焦点	-blur	鼠标按下	-mousedown
键盘按下	-keydown	鼠标拖动	-drag
不可用、禁用、只读	-disabled	可用、启用	-enabled
选中（下拉框）	-selected	选中（选择框）	-checked
成功	-success	失败	-fail
错误	-err	警告	-warning
当前状态	-current	显示	-show
隐藏	-hide	添加	-add
删除	-del	编辑	-edit
阅读、视图	-view	返回	-back
通过	-pass

布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
例如：text改为txt、delete改为del，这里针对单个单词组合命名，对词组单词的组合建议不使用缩写或简写。

单词	缩写	说明
bottom	btm	底部
button	btn	按钮
background	bg	背景
content	cont	内容
check	chk	选择框
current	curr	当前的
delete	del	删除
text	txt	文本
disabled	dis	禁用
foot	ft	底部
head	hd	头部
hidden	hide	隐藏
input	inp	input框
image	img	图片
index	idx	索引
message	msg	消息
password	pwd	密码
previous	prev	前面的、上一面
radio	rad	单选
register	reg	注册
select	sel	选择
tbody	tbd	表格主体
thead	thd	表格头部
tfoot	tft	表格底部
wrap	wp	包装，外层

块名或元素名加上行为修饰符，之间用中划线(-)隔开。
块或元素名-行为修饰符
行为修饰符的命名只能用Class选择器
使用小写命名
特殊化class

以上面的tt为例，大概有三种办法：

第一种办法： 追加class特殊化，根据我们上面定义的规则，在.page-tt上追加一个class成为.page-tt.page-tt--user，注意.page-tt--user不是一个独立的class，它使基于.page-tt这个基础上的。 第二种办法： 使用父类，给一个范围，于是形成.page-user .page-tt。

由第三个通过父类控制的办法，我们进入第三个要讨论的问题，层级结构

一般我们使用的是第二种和第三种办法，因为这两种都有共同的.page-tt，可以比较方便控制一些基础共有的样式。

拼图规范
基础组件（ui-step、ui-tab、ui-dropdown等）图片拼成一张图，命名为ui-icon

    注：组件与组件之间应该有明显的分割间距，每个组件需要留出足够的空间，方便后期维护

文件命名
所有按钮图标拼成一张图，命名为icon-btn
所有（除基础组件和按钮以外）公共图标拼成一张图，命名为：icon
文件夹名：驼峰命名规则，首字母小写
文件名：驼峰命名规则，首字母小写
页面文件：驼峰命名规则，首字母小写
背景图片：bg-name
图标图片：ui-icon（基础或控件图标）、icon（公共图标）、icon-name（其他主题图标）、s-name（拼图图片）
Logo：logo-主题
所拼图文件大小建议控制在500KB内，以提高图片的下载速度
 

————————————————
版权声明：本文为CSDN博主「__Pluto__」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_49611304/article/details/122924278