Kevan's Blog Kevan's Blog

CSS常用命名惯例参考

in 前端 read (117) 文章转载请注明来源!

之前还有一篇文章也可以参考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公告
jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://www.qqstop.cn/archives/96.html (转载时请注明本文出处及文章链接)

命名CSS
最后由Kevan修改于2017-12-19 22:26
发表新评论
已有 5 条评论
  1. 保罗
    保罗Windows 7谷歌浏览器
    回复

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

  2. 晨曦啊
    晨曦啊Windows 7搜狗浏览器
    回复

    2018 到此一游!提起祝元旦节快乐!

  3. 折影轻梦
    折影轻梦Windows 7谷歌浏览器
    回复

    2018新年快乐!!!

  4. 落叶大大
    落叶大大Windows 10谷歌浏览器
    回复

    上不是shang吗?

    1. Kevan
      Kevan本文作者iPhone OSSafari浏览器
      回复

      @落叶大大 不行,我们要高雅一点

雷姆
拉姆