CSS的class、id、css文件名的常用命名常用的CSS命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(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(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.主要的master.css模块module.css基本共用base.css布局，版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.cssCSS文件中class或id起名规则：1）开头字母一律小写2）尽量不要用缩写英文除非可以一目了然的3）如果遇到相差不大class或者id，主功能识别字母在前，位置识别字母在后，位置识别字母第一个可大写（如：navTop，menuLeft）4）必须使用英文开头css文件内容注释写法：Css文件内容注释统一采用：/*注释内容*/css文件存放位置：所有css文件统一存放，例如在根目录下的style目录下。
10个最常用的CSS className很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。
1.class=”fixed”fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下以下为引用的内容：.fixed:after{content:".";display:block;height:0;clear:both; visibility:hidden;}.fixed{display:block;}/* \*/.fixed{min-height:1%;}* html .fixed{height:1%;}这个样式就可以用在下面的情形，每个li都是浮动的：以下为引用的内容：<ul class="fixed"><li><img src="images/img_01.jpg" alt="First Thumb" /></li><li><img src="images/img_02.jpg" alt="Second Thumb" />...</li></ul>2.class=”alt”alt是”alternative”（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：以下为引用的内容：#content img{float:left;display:inline;margin-right:10px;border:1px solid #ccc;padding:1em 0;background:#fff;}#content img.alt{float:right;margin-right:0;margin-left:10px;}3.class=”selected”这个最经常用的，用来处理mouseover或选中元素的效果。
以下为引用的内容：<li class="selected"><ahref="/about">About Us</a></li>4.class=”first”, class=”last”直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。
5.class=”image”平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的class=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做：以下为引用的内容：<img src="/images/img_me.jpg"alt="my funny face" />This is me trying to look cool!The rest of the content here...6. class=”inner”inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）：7.class=”link”link跟image类似，我用来嵌套一个A标签，最经常用来制作”ReadMore”链接：以下为引用的内容：<a href="#">Read more...</a>8.class=”one”, class=”two”,class=”three”…这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：以下为引用的内容：<ul><li class="one"><ahref="#">Home</a></li><li class="two"><ahref="#">About</a>...</li></ul>9.class=”even”, class=”odd”用来实现隔行换样式，一般用在表格和列表：以下为引用的内容：<ul><li class="even">Content</li><li class="odd">Content</li><li class="even">Content</li><li class="odd">Content</li></ul>10.class=”section”一般用在为指定内容中特定部分添加特定的样式：以下为引用的内容：<div class="section">content here...</div>要是就几行或几十行代码吧！就根据英文单词就行了。
可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的首字母代替。
可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。
div+css样式表的id和class 的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。
所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下：:首先讲一下div+css样式表的id的常用命名规则如下表所示当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言，多多指教.CSS最常用的五类选择器转载准确而简洁的运用CSS选择器会达到非常好的效果。