css_17 | CSS——CSS 拓展：② CSS 编码规范

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

css_17
复制代码

1. 列举 CSS 编码规范？
2. 编码规范的做用是什么？列举 5 条以上编码规范。
复制代码

---

前言： 编码是否规范，直接影响代码的可读性、可维护性、可交接性等。一份好的代码，能够作到：无论有多少人共同参与同一项目，均可以确保每一行代码都像是同一我的编写的。

---

1 CSS命名技巧

• 语义化标签优先
• 基于功能命名、基于内容命名、基于表现命名
• 简略、明了、无后患

（💡 看这个东西中文名字是什么，而后试着翻译成英文。）

1.1 常见命名 1

名称	用途
.wrap 或 .wrapper	用于外侧包裹
.container 或 .ct	包裹容器
.header	用于头部
.body	页面 body
.footer	页面尾部
.aside 、.sidebar	用于侧边栏
.content	和 header footer 对应，用于主要内容
.navigation	导航元素
.pagination	分页

1.2 常见命名 2

名称	用途
.tabs > .tab	tab 切换
.breadcrumbs	导航列表、面包屑
.dropdown	下拉菜单
.article	文章
.main	用于主体
.thumbnail	头像，小图像
.media	媒体资源
.panel	面板
.tooltip	鼠标放置上去的提示
.popup	鼠标点击弹出的提示

1.3 常见命名 3

名称	用途
.button 、.btn	按钮
.ad	广告
.subnav	二级导航
.menu	菜单
.tag	标签
.message 或者 .notice	提示消息
.summary	摘要
.logo	logo
.search	搜索框
.login	登陆

1.4 常见命名 4

名称	用途
.register	注册
.username	用户名
.password	密码
.banner	广告条
.copyright	版权
.modal 或者 .dialog	弹窗

2 CSS 书写规范

• tab 用两个空格表示；
• css 的 : 后加个空格， { 前加个空格；
• 每条声明后都加上分号；
• 换行，而不是放到一行；
• 颜色用小写，用缩写，如： #fff；
• 小数不用写前缀， 0.5s → .5s ；0 不用加单位；
• 尽可能缩写， margin: 5px 10px 5px 10px; → margin: 5px 10px;。

3 CSS 声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

• Positioning
• Box model
• Typography（印刷）
• Visual （视觉）

因为定位（positioning）能够从正常的文档流中移除元素，而且还能覆盖盒模型（box model）相关的样式，所以排在首位。盒模型排在第二位，由于它决定了组件的尺寸和位置。

其余属性只是影响组件的内部（inside）或者是不影响前两组属性，所以排在后面。
💡例如：

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;


  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;


  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}
复制代码

---

后记： 本篇文章常看常新，规范化的编码对本身、对他人都是百利而无一害的。

祝好，qdywxs ♥ you！