清晰明了的CSS代码

一：css命名规则

使用类选择器，放弃ID选择器。因为ID在一个页面中的唯一性导致了如果以ID为选择器来写css，就无法重用，而class而优势在于复用性，而且私有度也并不高。因此，我一般情况下会选择在HTML中的ID用于JavaScript，但是在CSS里只用class，一个ID也不用。这样做实际上也是将表现和行为分开，而不是混在一起。

在html文件中写class的方法：使用单个字母+“-”为前缀。比如：对于header部分，我们可以这样写:

<div class="g-header"></div>

单个字母的意思就是（grid）的第一个字母。好处是我们在css代码中可以通过首字母清楚地知道其作用是什么，即见名知意。除此之外，我们应当注意：在命名时应当尽量简约而不失语义。

二：css代码格式

1、选择器、属性和值都是用小写。

2、单行写完一个选择器定义。

3、最后一个值也要以分号结尾。

4、省略值为0的单位

5、使用16进制表示颜色值，其中的字母使用大写形式，并尽量缩写。

6、根据属性的重要性顺序书写。

7、私有在前，标准在后。

三、类选择器的命名建议

1、对于布局，即用.g-作为前缀，通常有以下推荐的写法。

头部： header或head

主体： body

尾部：footer或foot

主栏： main

侧栏：side

盒容器： wrap或box

主栏子容器：mainc

侧栏子容器：sidec

2.对于模块，即.m-作为前缀。元件，.u-作为前缀，通常有下面推荐的写法。

导航： nav

子导航：subnav

菜单：menu

选项卡：tab

标题区：head或title

内容区：body或content

列表：list

表格：table

表单：form

排行：top

热点：hot

登录：login

标志：logo

广告：adervertise

搜索：search

幻灯：slide

帮助：help

新闻：news

下载：download

注册：register或regist

投票：vote

版权:copyright

结果：result

按钮：button

输入：input

---

以上です。