前端书写规范---css规范

来源1
来源2

为何规范？**

1. 规范不是一种约束，而是一种约定，强调团队的一致性
2. 加强团队的合作性，提高协作效率
3. 形成一种团队文化，积累知识
4. 规范最终是为项目服务的，我们所做的一切都是为了优化项目和流程提高我们的工作效率

一、CSS文件

注释

根据需要解释代码，团队开发这个非常重要！
[声明]

/*
@name:  文件的名称
@description: 简要的描述这个css 文件功能
@require: 依赖文件，没有就不用写
@author: 作者  最好附带联系方式(邮箱)
*/

[内容]

/* Header */
内容区
/* End Header */

[模块]

/*区域模块-1    分模块的写上注释 */
.classname, .ued{
    background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
.ued>ul li>a{
     font-size:10px;
}

/*区域模块-2 分模块的写上注释  */
.classname{
    width:950px;
    margin:0 auto;
}

文件编码级

编码必须使用utf-8（无BOM）

二、 CSS书写顺序

虽然不完全按照某个书写顺序来写，但应该养成良好的习惯，让看代码的人更易理解，易读性对于团队协作来说是非常重要的

框架为先，细节次之。

比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再去渲染容器里面的内容。最终呈现给用户. 通常像 color、font、padding 之类的写在后面。

.selector{
    float:left;
    width:300px;
    height:200px;
    font-size:14px;
    color:#f36;
}

有因才有果。

比如想使用“图片替换文字”技术，通常要使用的 text-indent。如果我们使用标签的是 span

<span>这个文字将被图片替换</span>

[正确写法]

.thepic{ 
    display:block;
    text-indent:-9999em;
}

我们应该是先将 span 变成块级元素，再将文字 indent,而不是先 indent 再变成块级的。又如我们，如果想让一个 span 使用 margin, 那么我们应该这样写：

span{
    display:block;
    margin-bottom:10px;
}

而非*margin-bottom先行，因为*没有 display 之前，行内元素是没有 margin 的。

属性书写顺序

1. 位置属性(position, top, right, z-index, display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color- text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)

三、 CSS书写规范

避免

1. 内联样式
2. 使用低效选择器

不要随意使用id

id 在 JS是唯一的，不能多次使用，而使用 class 类选择器却可以重复使用，另外id的优先级优先于
class，所以 id 应该按需使用，而不能滥用。

推荐

1. 使用有效的CSS, 除非是bugs处理或专属语法（浏览器私有前缀）
2. 使用短ID或类命名，但确保他们不要太过隐晦，或直白（如#blue-button）
3. 大型项目使用前缀，如#xyz-help, .xyz-column
4. 选择器尽可能简单，如#example，而不是ul #example
5. 每个声明最后都要有分号（即使是最后一个）
6. 避免浏览器hacks

使用缩写

[属性缩写]

// 反对
border-width: 1px;
border-style: solid;
border-color: #ccc;

border:1px solid #ccc      // 赞 

[颜色缩写]

color :#99ccff;            // 反对
color :#9cf;               // 赞

url()中不使用引号，0后面不跟单位

margin: 0px auto;    // 反对
margin :0 auto;      // 赞

为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。

去掉小数点 0

浏览器前浏览器私有写法在前，标准写法在后。

-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;

CSS 命名规范

样式表文件命名

1. 主要的 master.css
2. 模块 module.css
3. 基本共用 base.css
4. 布局、版面 layout.css
5. 主题 themes.css
6. 专栏 columns.css
7. 文字 font.css
8. 表单 forms.css
9. 补丁 mend.css
10. 打印 print.css

选择器命名

1. 长名称或词组可以使用中横线来为选择器命名
2. 不建议使用“_”下划线来命名CSS选择器
    浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
    能良好区分JavaScript变量命名（JS变量命名是用“_”）

页面结构

1. 容器: container
2. 页头：header
3. 内容：content/container
4. 页面主体：main
5. 页尾：footer
6. 导航：nav
7. 侧栏：sidebar
8. 栏目：column
9. 页面外围控制整体佈局宽度：wrapper
10. 左右中：left right center

导航

1. 导航：nav
2. 主导航：mainnav
3. 子导航：subnav
4. 顶导航：topnav
5. 边导航：sidebar
6. 左导航：leftsidebar
7. 右导航：rightsidebar
8. 菜单：menu
9. 子菜单：submenu
10. 标题: title
11. 摘要: summary

功能

1. 标志：logo
2. 广告：banner
3. 登陆：login
4. 登录条：loginbar
5. 注册：register
6. 搜索：search
7. 功能区：shop
8. 标题：title
9. 加入：joinus
10. 状态：status
11. 按钮：btn
12. 滚动：scroll
13. 标籤页：tab
14. 文章列表：list
15. 提示信息：msg
16. 当前的: current
17. 小技巧：tips
18. 图标: icon
19. 注释：note
20. 指南：guild
21. 服务：service
22. 热点：hot
23. 新闻：news
24. 下载：download
25. 投票：vote
26. 合作伙伴：partner
27. 友情链接：link
28. 版权：copyright