css编码规范

2018-09-02

命名技巧

语义化

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

范例

<!-- 不好  -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>

<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>

命名范例

1.所有命名都使用英文小写
推荐：<div class="main"></div>
不推荐：<div class="Main"></div>
2.命名用引号包裹
推荐：<div id="header"></div>
不推荐：<div id=header></div>
3.用中横线连接
推荐：<div class="mod-modal"></div>
不推荐：<div class="modModal"></div>
4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：<div class="text-lesser"></div>
不推荐：<div class="light-grey"></div>

常见命名1
(1).wrap或.wrapper – 用于外侧包裹
(2).container或 .ct – 包裹容器
(3).header – 用于头部
(4).body – 页面 body
(5).footer – 页面尾部
(6)aside、sidebar – 用于侧边栏
(7).content – 和header footer 对应，用于主要内容
(8).navigation – 导航元素
(9).pagination – 分页

常见命名2
(1).tabs > .tab – tab 切换
(2).breadcrumbs – 导航列表、面包屑
(3).dropdown – 下拉菜单
(4).article – 文章
(5).main – 用于主体
(6).thumbnail – 头像，小图像
(7).media – 媒体资源
(8).panel – 面板
(9).tooltip – 鼠标放置上去的提示
(10).popup – 鼠标点击弹出的提示

常见命名3
(1).button、.btn – 按钮
(2).ad – 广告
(3).subnav – 二级导航
(4).menu – 菜单
(5).tag – 标签
(6).message或者.notice – 提示消息
(7).summary – 摘要
(8).logo – logo
(9).search – 搜索框
(10).login – 登录

常见命名4
(1).register – 注册
(2).username – 用户名
(3).password – 密码
(4).banner – 广告条
(5).copyright – 版权
(6).modal或者 .dialog – 弹窗

css书写规范

(1)tab 用两个空格表示
(2)css的 :后加个空格， {前加个空格
(3)每条声明后都加上分号
(4)换行，而不是放到一行
(5)颜色用小写，用缩写, #fff
(6)小数不用写前缀, 0.5s -> .5s；0不用加单位
(7)尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

范例

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}


/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}


/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}


/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

请参考
google html css编码规范

bootstrap 编码规范

命名这货真难