CSS 常用命名惯例参考
贴士：以下常用名称可灵活组合使用
方位、大小及范围
| 命名 | 意义 | 原型 |
|---|---|---|
top |
上 | – |
bottom |
下 | – |
left |
左 | – |
right |
右 | – |
front |
前 | – |
back |
后 | – |
side |
侧 | – |
row |
行 | – |
col |
列 | column |
bar |
条；如search-bar - 搜索条 |
– |
box |
框、盒子；如login-box - 登录框 |
– |
block |
块；跟盒子一样 | – |
size |
尺寸 | – |
sm |
小 | small |
md |
中 | medium |
lg |
大 | large |
bold |
粗 | – |
light |
细 | – |
horizontal |
水平的 | – |
vertical |
垂直的 | – |
normal |
正常的；常规的 | – |
align |
对齐 | – |
parent |
父级 | – |
页面主结构
| 命名 | 意义 | 原型 |
|---|---|---|
header |
页头，头 | – |
nav |
导航栏 | navigation |
main |
主要 | – |
content |
内容 | – |
main-content |
主要内容 | – |
footer |
页脚 | – |
container |
容器 | – |
wrapper |
同上 | – |
页面辅助结构
| 命名 | 意义 | 原型 |
|---|---|---|
logo |
商标，标志 | – |
headline |
头条，头版头 | – |
sidebar |
侧栏 | – |
sidebar-left |
左侧栏（其他方向以此类推） | – |
list |
列表 | – |
title |
标题 | – |
cat |
分类 | category |
icon |
图标 | – |
menu |
菜单 | – |
tab |
标签页 | – |
banner |
条幅，标语 | – |
slider, carousel |
轮播 | – |
btn |
按钮 | button |
msg |
消息 | message |
sub-... |
子… 如：sub-menu - 子菜单 |
– |
...-item |
单条… 如：nav-item - 单条导航（导航链接） |
– |
电商站
| 命名 | 意义 | 原型 |
|---|---|---|
ad |
广告 | advertising |
promotion |
促销 | – |
hot |
热卖 | – |
new |
新品 | – |
product |
产品 | – |
price |
价格 | – |
summary |
摘要 | – |
publisher |
厂商 | – |
buy |
购买 | – |
pay |
支付 | – |
常用功能
| 命名 | 意义 | 原型 |
|---|---|---|
login |
登录 | – |
signup, reg |
注册 | regsiter, signup |
logout |
登出 | – |
search |
搜索 | – |
keyword |
关键词 | – |
input |
输入 | – |
output |
输出 | – |
scroll |
滚动 | – |
ranking |
排行 | – |
anno |
公告 | announcement |