CSS 命名规范

本文最后更新于:2024年3月18日 凌晨

CSS 命名规范

布局相关

语义 命名 简写
盒容器 wrap wrap
盒子 box box
容器 container container
主栏 main main
侧栏 sidebar/aside sidebar/aside
文档 doc doc
头部 head hd
主体 body bd
底部 foot ft

模块相关

语义 命名 简写
导航 navigation nav
面包屑 crumb crumb
菜单 menu menu
选项卡 tab tab
标题 title title
内容 content content
列表 list list
表格 table table
排行榜 rank rank
登陆 login login
表单 form form
品牌标识 logo logo
广告 advertise ad
搜索 search search
切换 slide slide
提示 tips tips
版权 copyright copyright
按钮 button btn
输入 input ipt
结果 result result
下载 download dowload
新闻 news news
注册 register reg
热点 hot hot
展开 collapse collapse
警告 alert alert
提示 tooltip tooltip
下拉 dropdown dropdown

状态相关

语义 命名 简写
语义 命名 简写
选中 selected selected
当前 current current
激活 active active
显示 show show
隐藏 hidden hide
打开 open open
关闭 close close
出错 error err
禁用 disabled disabled
扩展 extend extend

命名规则

驼峰命名

1
<p class="navWrap"></p>

划线命名

1
2
<p class="nav-wrap"></p>
// 推荐使用。

或。

1
<p class="nav_wrap"></p>

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!