DIVCSS命名规范记录

本文格式为Word版，下载可任意编辑——DIVCSS命名规范记录DIV+CSS命名模范记录

我们开发CSS+DIV网页Xhtml时候,对比困惑和纠结的事就是CSS命名，更加是新手不知道什么地方该如何命名，怎样命名才是好的方法。

命名规矩说明：

1、全体的命名最好都小写

2、属性的.值确定要用双引号括起来，且确定要有值如class=pcss5,id=pcss5

3、每个标签都要有开头和终止，且要有正确的层次，排版有规律工整

4、空元素要有终止的tag或于开头的tag后加上/

5、表现与布局完全分开，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6、定义，应遵循从大到小的原那么，表达文档的布局，并有利于探寻引擎的查询。

7、给每一个表格和表单加上一个唯一的、布局标记id

8、给图片加上alt标签

9、尽量使用英文命名原那么

10、尽量不缩写，除非一看就明白的单词

相对网页外层重要片面CSS样式命名：

外套wrap用于最外层头部header用于头部主要内容main用于主体内容中部左侧main-left左侧布局右侧main-right右侧布局导航条nav网页菜单导航条内容content用于网页中部主体底部footer用于底部

DIV+CSS命名参考表：

以下为CSS样式命名与CSS文件命名参考表，DIVCSS命名集合：

CSS样式命名

说明

网页公共命名

#wrapper

页面外围操纵整体布局宽度

#container或#content

容器,用于最外层

#layout

布局

#head,#header

页头片面

#foot,#footer

页脚片面

#nav

主导航

#subnav

二级导航

#menu

菜单

#submenu

子菜单

#sideBar

侧栏

#sidebar_a,#sidebar_b

左边栏或右边栏

#main

页面主体

#tag

标签

#msg#message

提示信息

#tips

小技巧

#vote

投票

#friendlink

友情连接

#title

标题

#summary

摘要

#loginbar

登录条

#searchInput

探寻输入框

#hot

热门热点

#search

探寻

#search_output

探寻输出和探寻结果好像

#searchBar

探寻条

#search_results

探寻结果

#copyright

版权信息

#branding

商标

#logo

网站LOGO标志

#siteinfo

网站信息

#siteinfoLegal

法律声明

#siteinfoCredits

信誉

#joinus

参与我们

#partner

合作伙伴

#service

服务

#regsiter

注册

arr/arrow

箭头

#guild

指南

#sitemap

网站地图

#list

列表

#homepage

首页

#subpage

二级页面子页面

#tool,#toolbar

工具条

#drop

下拉

#dorpmenu

下拉菜单

#status

状态

#scroll

滚动

.tab

标签页

.left.right.center

居左、中、右

.news

新闻

.download

下载

.banner

广告条顶部广告条

电子贸易相关

.products

产品

.products_prices

产品价格

.products_description

产品描述

.products_review

产品评论

.editor_review

编辑评论

.news_release

最新产品

.publisher

生产商

.screenshot

缩略图

.faqs

常见问题

.keyword

关键词

.blog

博客

.forum

论坛

CSS文件命名

说明

master.css,style.css

主要的

module.css

模块

base.css

根本共用

layout.css

布局，版面

themes