CSS常用命名规范及写法详解

由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTMl和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：

一、CSS样式命名规范

建议：用字母、“_”（下划线）、“-”号、数字组成，必须以字母开头，不能以数字开头。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看
就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：
头部样式用header，头部左边，可以用header_left或headerLeft,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box _2of3 (三列中的第二列)、box _3of3 (三
列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
常用id的命名：
页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
显示当前所在位置：breadcrumbs
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright

(1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题：title
摘要：summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的：current
小技巧：tips
图标：icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
css文件命名：
主要的：master.css
模块：module.css
基本共用：base.css
布局，版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css

二、id和class的使用及区别

我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：
ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>
CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>
id一个页面只可以使用一次，class可以多次引用。
我在页面中用了多个相同id在浏览中显示也正常，id和class好象没什么区别，似乎多个相同id对页面也有什么影响嘛！
但是当你需要用JavaScript或其他脚本通过id来控制这个Box，那就会出现错误。且页面存在多个相同的ID不能通过W3的校验。
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
也就是说建议大家在写XHML+CSS时如果是维一的结构定位的就用id，否则就用class吧（这样让出非结构定位的div块的id让程序员自己定义使用）
web标准希望大家用严格的习惯来写代码。

三、使用css缩写

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。常用的css缩写的主要规则：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒模型尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1px 0 2px 5px;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);

四、明确定义单位，除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以
不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

五、区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

六、取消class和id前的元素限定

当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}

七、默认值

通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。为避免冲突，可以在样式表一开始就先定义所有元素的
margin和padding值都为0，象这样：
* {
padding:0;
margin:0
}
或者是针对某元素来定义：
body, ul, li, div, span {
padding:0;
margin:0
}

八、CSS的优先级

内联样式(inline style) > ID选择符 > 类选择符(class), 伪类(pseudo-class)和属性(attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释：
*内联样式(inline style)：元素的style属性，比如 <div style="color:red;"></div> ,其中的color:red;就是内联样式
*ID选择符：元素的id属性，比如 <div id="content"></div> 可以用ID选择符#content
*类选择符：比如<div class="box"></div>，可以使用类选择符 .box
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。

九、多重CSS样式定义，属性追加重复最后优先原则

一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}
在页面代码中，我们可以这样调用:
<div class="one two"></div>
这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？
<div class="one two"></div>应用到的样式如下：
width:200px;
border:10px solid #000;
background:url(images/imgB.jpg) no-repeat left top;
因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则
就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

十、CSS的调用

页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样： <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。
<link href="css/style.css" type="text/css" rel="stylesheet"/>
"@import"命令方法：类以下代码, <style type="text/css" media="all">@import url( css/style01.css );</style>
本人推荐使用第二种调用方法（外部调用法）