css书写规范整理

CSS书写规范整理：

l  选择器命名：

1.class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

• 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
• class 名称应当尽可能短，并且意义明确。
• 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
• 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
• 使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

2.避免在名字中使用属性，E.g.如果你定义了

输出结果为：Some text。如果你或者别人决定换其他颜色比如蓝色，css就变为

这样的结果就是你在HTML代码中写着class=”red”，但是输出结果是长这样的：Some text，这是很荒谬的。所以，最好用一些一般的名字，比如emphasis, highlighted, standout...

3.通用类选择器命名：

外套：wrapper       //页面外围控制整体布局，通常用来将footer连起来。

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签：tags

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

使用HTML标签：

4.尽可能多的用HTML标签来代替类名，比如

在类中使用定义的HTML标签

来代替自定义类名

         如果你想在不同的选择器中有不同的效果，可以这样做（具体化定义，针对不同的选择器细化样式）：

5.重置

         可以重置HTML标签

但是要避免仅仅因为某处需要一些特别的样式而重置一些通用的属性，此时最好定义一个新类。

E.g 如果你需要p没有margin，不要通过重置P,H1,H2,…的通用属性或前后添加</br>和行间样式。

正确：

        

错误：

        

6.尽可能避免使用行间样式。

7.速记法：使用速记法可能会非常方便，但也不易于阅读，所以通常情况下应该只对易于理解的属性使用速记法。

         E.g.

8. ID选择器的使用——尽量只在两种情况下使用：文件中只有唯一的这个对象；你需要从CSS或JS中引用这个对象。

l  字体单位：总是使用 em 来代替pt,px,cm…这样可以更容易调整整个网站的字体大小，如果你需要让它变大或变小的话。

错误：

正确：

l  代码风格：

1.      对于较少的样式可以写在一行，较多时则需要格式化（缩进、块级），如若需要可最后进行压缩，同时一定要记得保留格式化版本方便日后维护。

2.      选择器分组：将一个内容模块的选择器放置于一起，最好进行注释。

如果进行格式化会更加易读。

l  最优方法：

1.将样式表至于页面头部。

2.尽量使用一个大的CSS文件以减少小的CSS文件的个数，这样在浏览器加载CSS文件时可以减少http请求次数，有助于提高网站加载性能。

         3.不要使用表达式，除非必须。可以通过JS来实现需要的效果，同时具有更好的兼容性。

         4.能够重用样式是好事，但是如果你在其他项目（没有表格或表格简单）中使用你以前写的通用样式可能会造成带宽浪费，因为你加载的内容超过所需要的造成额外的HTTP请求，也会导致更长的加载时间和更差的性能。

l  性能：最小化你的CSS文件。算一下，如果每天有5000人次访问你的网站（允许计算浏览器缓存这样就不用每次都加载css），CSS文件是25KB而不是50KB，每天就会节约125,000 KB或者122 MB，这样每月仅CSS文件就会节省3 GB的带宽。不难想象所有的CSS文件、js文件以及图片会节省多少带宽…它可以美元节省超过10 GB的带宽，并且这很容易也很简单去做。

（1）      减少DOM元素；

（2）      优化图片,如果你使用很多图标,创建一个大的图像包含所有图标再使用精灵创建css样式。

l  CSS书写顺序：

（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等)

l  注释的写法：

/* Header */

内容区

/* End Header */