MENU

CSS常用命名惯例参考

之前还有一篇文章也可以参考CSS 常用命名规范总结

方位、大小及范围

命名意义
top
bottom
left
right
front
back
side
row
col
bar条;如search-bar - 搜索条
box框、盒子;如login-box - 登录框
block块;跟盒子一样
size尺寸
sm
md
lg
bold
light
horizontal水平的
vertical垂直的
normal正常的;常规的
align对齐
parent父级

页面主结构

命名意义
header页头,头
nav导航栏
main主要
content内容
main-content主要内容
footer页脚
container容器
wrapper同上

页面辅助结构

命名意义
logo商标,标志
headline头条,头版头
sidebar侧栏
sidebar-left左侧栏(其他方向以此类推)
list列表
title标题
cat分类
icon图标
menu菜单
tab标签页
banner条幅,标语
slider, carousel轮播
btn按钮
msg消息
sub-...子... 如:sub-menu - 子菜单
...-item单条... 如:nav-item - 单条导航(导航链接)

电商站

命名意义
ad广告
promotion促销
hot热卖
new新品
product产品
price价格
summary摘要
publisher厂商
buy购买
pay支付

常用功能

命名意义
login登录
signup, reg注册
logout登出
search搜索
keyword关键词
input输入
output输出
scroll滚动
ranking排行
anno公告
Tags: 命名, CSS
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

已有 5 条评论
  1. 写了这么久的前端,一直都没给自己订过所谓的命名“标准”,其实觉得偶尔稍微宽松一点也没有什么不好

  2. @(guai) 2018 到此一游!提起祝元旦节快乐!

  3. 2018新年快乐!!!

  4. 上不是shang吗? @(huaji)

    1. @落叶大大不行,我们要高雅一点 @(huaji)