我们做认识事情都要有个良好的习惯，编程也是如此，我们这里就教你如何给css文件命名。坚持使用统一的CSS命名规则并养成习惯，可以让你更容易维护、修改以前编写过的CSS代码，从而提高自己的工作效率。而且还能加强搜索引擎优化，方便记忆。

 首先，CSS文件必须统一放在一个目录下，比如style、css等。

其次，在给CSS文件进行命名时，经常使用符合语义的英文名字，实在不行再使用拼音命名。在命名时，将影响全局的CSS和基础定义写在base.css或basic.css文件中，布局内容写在在layout.css文件中，如果有需要，还可以将定义字体的css内容单独写在font.css文件中，然后针对网站的每个栏目单独写一个以栏目名称命名的CSS文件。不过通常在全局定义的内容不多的情况下，我会将布局内容和字体内容写在base.css或basic.css文件中。

最后，在给CSS里的class和id命名时，使用英文名或者英文名字的组合，另外，在有从属关系的class里，我们可以充分利用组合名称。

通常组合名称有三种写法：

第一种用中横线“-”来连接前后单词作为组合，比如“#space-banner”；

第二种利用下划线“_”进行连接，比如“#space_banner”；

第三种方法是将第二个单词的首字母进行大写，比如“#spaceBanner”，这种写法也叫做驼峰式（camel case），但需要注意的是，由于CSS里是区分大小写的，所以spaceBanner和spacebanner是两个不同的CSS名字。

这三种方法使用哪种都可以，因人而异，但只要采用其中一种，那么全部的CSS文件都应该遵循这个规范，这样才能统一风格。

下面我们还是以阿邦网为原型举个简单点的例子来详细说名一下吧。

首先分析一下阿邦网的基本结构和页面数量及页面名称。

阿邦网的文章公分七大类，所以加上首页在内一共有八个一级栏目，即首页、时尚、美食、健康、兴趣、宠物、数码、旅游八个。每个一级栏目下又有若干个二级页面，就是作者们各自的首页，这些页面长的全部一样，所以它们共用的是同一个页面模板，只用一个CSS文件即可。

每个作者还有自定义的分类，算是三级页面，它们也是共用相同的页面模板。除此外还有一个全部文章列表页面和文章的展示页面。这样草草算来大约共有12个页面，就先停到这里，更深层的那些页面可能更多，暂时先不追究了。下面我们对它们所要用到的CSS文件进行分配。

第一步，我们肯定需要一个全局定义的CSS文件来定义整个网站的字体大小、颜色、背景、行高、列表样式、按钮样式、表格样式等等，那么就有了base.css文件。

第二步，一个网站必然会有它的页面头和版权信息，我们将定义页面头部信息的CSS文件起名为header.css，版权信息也可以叫做页脚，起名为copyright.css或footer.css文件。因为阿邦网的版权信息不算多，我就把页脚信息加在了header.css文件中合并成一个文件。

第三步，命名所有一级栏目的CSS文件，共有首页、时尚、美食、健康、兴趣、宠物、数码、旅游八个栏目，分别定义为index.css、fashion.css、food.css、health.css、hobbies.css、pets.css、digital.css、travel.css。

第四步，命名所有二级栏目的CSS文件，它们是作者首页，作者自定义的分类页，分别定义为author_index.css和author_cate.css。

第五步，命名所以三级栏目的CSS文件，有文章列表页和文章展示页（底级页），分别定义为lists.css和detail.css。
这样一共就出现了14个CSS文件，如顶部图一，一定有人会问为什么怎么这么多？其实对于一个大型网站来讲，这一点也不多，而且是有必要的。当然这些CSS文件不用一次性全部新建出来，只需要制作到那个页面的时候再建立即可，但是在初步规划的时候一定要预想到，正所谓未雨绸缪嘛。

 

下面我们再用首页举例讲解一下页面的CSS文件中class和id的写法，如图二所示，阿邦网首页的主要区块都已经标注在图中，并且已经按照我的习惯取了名字。#header和#footer可以写在header.css文件中。通用的页面定义CSS内容写在base.css文件中，其余都可以写在index.css文件中。 首先整个页面是有固定宽度的，所以需要在页面最外面设置一个容器，让其居中显示，并让所有内容被包含于其中，我们一般起名为#wrap。 由于首屏焦点图（蓝色区域）内容比较多，必然会用到float属性进行布局，为了使它发挥正常，不造成错位，需要在首屏位置外部再加上一个外套，这里命名为.box，使用class的原因是后面还需要用到它，并且会出现很多次。 其它的部分很显而易见了，就不意义说明了。最后生成的Html文件应为：

<div id="wrap">   

<div class="box">    

 <div id="focus">焦点图</div>   

  <div id="header">页面头</div>     

<div class="box">      

 <div id="top_recommend">顶部推荐</div>       

<div id="stars">本周之星</div>     

</div>    

 <div id="search">搜索</div>

  </div>  

 <div id="img_recommend">图片推荐</div>  

 <div class="box">    

   <div id="main_content">主要内容</div>   

    <div id="side_bar">侧边栏</div>  

 </div>  

 <div id="footer">版权信息</div>

 </div>