初学者养成良好的 CSS命名习惯

常用的CSS命名规则：

商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current
报头：　　　masthead
摘要, 概要　 summary或general
左边的浮动照图片 photoleft
右边的浮动图片 photoright
标题　　　title
条目底端　　　 entrybottom
更多　　　 extended或.more
容器背景 containerbg
服务　　 service
服务链接　　 servicelink
线　　 line
文本　　 text
右边　　 rightside
版权　　 copyright
新闻　　 news
书皮　　 wrapper
介绍　　　　　　intro-part1
专栏　　 column
路径　　 pathways
片断　　 section
模块　　 module
上导航　　 subnav
2.另外在编辑样式表时可用的注释可这样写：

<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名

主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

4.样式表中的注示
实例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */

实例二

HTML

<!--START: Header -->
<!--END: Header -->
<!--START: Content -->
<!--START: Main Navigation -->
<!--END: Main Navigation -->
<!--START: Search -->
<!--END: Search -->
<!--START: Submenu Navigation -->
<!--END: Submenu Navigation -->
<!--START: Left Column -->
<!--END: Left Column -->
<!--START: Left Column -->
<!--END: Right Column -->
<!--END: Content -->
<!-- START: Crazyegg code -->
<!-- END: Crazyegg code -->
<!--END: Body -->
<!-- 1159340743 -->

CSS

/********************** Site General Tag *************************/
/********************** Navigation Tag *************************/
/********************** Right Content Tag *************************/
/********************** Left Content Tag *************************/
/********************** Comments Tag *************************/
/********************** Header Tag *************************/
/********************** Form Tag *************************/
/********************** MOS Tag *************************/
/********************** Sub Navigation Tag *************************/
/************************ Resources Tag ***************************/
/********************** Sitemap Tag **********************/
/********************** Footer Tag *************************/

实例三（网易）

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus


HTML

<!-- 通栏1 Start -->
<!-- 通栏1 End --><!-- 第1屏 Start-->
<!-- 最新消息 Start -->
<!-- 最新消息 End --><!--产品导航 Start -->
<!-- 产品导航 End--><!-- 搜索 Start -->
<!-- 搜索 End --><!-- 第1屏小Logo Start-->
<!-- 第1屏小Logo End--><!-- 无线推荐 Start -->
<!-- 铃声搜索 -->
<!-- 铃声搜索 End --><!-- 精彩推荐 --><!-- 左边内容 -->
<!-- 右边内容 -->
<!-- 精彩推荐 END-->
<!-- 无线推荐 End -->