阅读 751

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

本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 所有,未经授权,请勿转载!
复制代码

获取编号.png

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;
}
复制代码


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

加油!

关注下面的标签,发现更多相似文章
评论