有经验的网页制作者都明白，对于有多个栏目的大型网站而言，使用单一的CSS文件是不可能的。但CSS文件名如何命名对于新手来说是件容易出乱子的事。如何才能将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>
CSS的命名方法基本上就是这样了，但这不是唯一的方法，每个人习惯不同，所以命名也一定不会相同，好的方法还有很多 ，需要大家自己去摸索，我们的最终目的就是结构清晰，修改方便。 下面给大家列出网络上搜来CSS命名规则，仅供参考。 CSS文件名： Base或Basic - 基本样式。 Layout - 全部页面布局。 除非改变布局否则不修改此文件。 General - 颜色，风格，排版，非结构的布局。本文件可据需要经常编辑。 Forms - 表单的布局和风格。如果需要可以为不同的页面而分别制作表单的css文件。 Index或Home - 用来控制主页而不考虑其他页面的样式。 Print - 基本的打印样式。 Themes - 主题样式表。 Master - 主要的CSS样式。 Font - 字体样式表。 样式命名： 外 套： wrap 主导航： mainnav 子导航： subnav 页 脚： footet 整个页面： content 页 眉： header 页 脚： footer 标 题： title 主导航： mainbav（globalnav） 顶导航： topnav 边导航： sidebar 左导航： leftsidebar 右导航： rightsidebar 旗 志： logo 标 语： banner 菜单内容1： menu1 content 菜单容量： menu container 子菜单： submenu 边导航图标：sidebarIcon 注释： note 面包屑： breadcrumb(即页面所处位置导航提示） 容器： container 内容： content 搜索： search 登陆： Login 功能区： shop(如购物车，收银台) 当前的 current
