史上最全！css 命名规范（英文命名）一．文件命名规范
[b] 样式文件命名[/b] [quote] 主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote]
[b]CSS ID 的命名[/b]
[quote] 页头：header
登录条：loginbar
标志logo
侧栏sidebar
广告banner
导航nav
子导航：subnav
菜单menu
子菜单：submenu
搜索search
滚动scroll
页面主体：main
内容content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入joinus
指南guild
服务service
热点八、、hot
新闻news
下载download
注册regsiter
状态status
按钮btn
投票vote
合作伙伴：partner 友情链接：friendlink 页脚footer
版权copyright
wrap mainnav subnav footer content header footer
label title mainbav ( globalnav ) topnav sidebar
leftsidebar rightsidebar logo banner menu1content
menucontainer submenu sidebarIcon
注释： note
面包屑： breadcrumb （ 即页面所处位置导航提示） 容器： 内容： 搜索： 登陆： 功能区： container
content
search Login
shop( 如购物车，收银台 ) 当前的 current[/quote]
[b] 网站常用中英文对照表 [/b] [quote] 网站导航 Site Map
公司简介 Profile or Company Profile or Company 公司设备 Equipment Equipment 公司荣誉 Glories Glories 企业文化 Culture Culture 产品展示 Product Product 资质认证 Quality Certification 企业规模 Scale Scale 营销网络 Sales Network
组织机构 organization organization 合作加盟 Join In Cooperation 技术力量 Technology Technology 经理致辞 Manager's oration 发展历程 Development History
外 套： 主导
航： 子导航：
页 脚： 整个
页面： 页 眉： 页 脚： 商 标： 标 题： 主导航： 顶导航： 边导航： 左导航： 右导航： 旗 志： 标 语： 菜单内容 1： 菜单容量： 子菜单： 边导航图标：
工程案例Engineering Projects 业务范围Business Scope 分支机构Branches 供求信息Supply & Demand 经营理念Operation Principle 产品销售Sales Sales 联系我们Contact Us Contact Us 信息发布Information Information 返回首页Homepage Homepage 产品定购order order 分类浏览Browse By Category 电子商务E-business 公司实力Strength Strength 版权所有Copy Right 友情连结Hot Link 应用领域Application Fields 人力资源Human Resource Hr 领导致辞Leader's oration 企业资质Enterprise Qualification 行业新闻Trade News 行业动态Trends 客户留言Customer Message 客户服务Customer Service 新闻动态News & Trends 公司名称Company Name 销售热线Sales Hot-Line 联系人Contact Person 您的要求Your Requirements 建设中In Construction 证书Certificate Certificate 地址ADD Add 邮编Postal Code Zipcode 电话TEL Tel 传真FAX Fax 产品名称Product Name 产品说明Description Description 价格Price 品牌Brand 规格Specification 尺寸Size
生产厂家Manufacuturer Manufacturer 型号Model
产品标号Item No. 技术指标Technique Data
产品描述Description
产地Production Place
销售信息Sales Information
用途Application
论坛Forum
在线订购On-line order
招商Enterprise-establishing
招标Bid Inviting
综述General
业绩Achievements
招聘Join Us
求贤纳士Join Us
大事Great Event
动态Trends
服务Service
投资Investment
行业Industry
规划Programming
环境Environment
发送Delivery
提交Submit
重写Reset
登录Enter
注册Login
中国企业网技术支持Powered By https://www.doczj.com/doc/0f11606439.html,
社区Community
业务介绍Business Introduction
在线调查Online Inquiry Inquiry
下载中心Download
会员登陆Member Entrance
意见反馈Feedback
常见问题FAQ
中心概况General Profile
教育培训Education & Training 游乐园Amusement Park 在线交流Online Communication 专题报道Special Report[/quote]
常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框则应命名为“searchInput ”、“搜索图标”命名这“searchIcon ”、“搜索按钮”命名为SearchBtn ” .......
一. 常规书写规范及方法
1. 选择DOCTYP：E
XHTML 1.0提供了三种DTD声明可供选择：
过渡的(Transitional): 要求非常宽松的DTD它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法) 。完整代码如下：
“https://www.doczj.com/doc/0f11606439.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
严格的(Strict): 要求严格的DTD你不能使用任何表现层的标识和属性，例如
。完整代码如下：
“https://www.doczj.com/doc/0f11606439.html,/TR/xhtml1/DTD/xhtml1-strict.dtd “>
框架的(Frameset):专门针对框架页面设计使用的DTD如果你的页面中包含有框架，
需要采用这种DTD完整代码如下：
“https://www.doczj.com/doc/0f11606439.html,/TR/xhtml1/DTD/xhtml1-frameset.dtd “>
理想情况当然是严格的DTD但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional) 是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：
为文档指定语言：
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：
标准的XML文档语言定义:
针对老版本的浏览器的语言定义：
为提高字符集，建议采用“utf-8 ”。
3. 调用样式表：
外部样式表调用：
页面内嵌法：就是将样式表直接写在页面代码的head 区。如：
原则：整个项目的命名风格要统一，id说明特殊性，class说明普遍性。从模块重用和节约文件体积的角度看，建议id类应尽量减少使用。class类的命名向模块化发展。 命名风格： 常见的命名风格有：1.分隔线 css-style(不推荐)；2.下划线 css_style(次推荐)；3.驼峰式 cssStyle(主推荐)。 没有强制一定用哪种风格，不过同个项目中最好只使用一种风格，除非想表达特殊作用的再用多种风格，但要写好注释说明。好的命名规范也能体现出语义化。 id 和class： 什么时候用id，什么时候用class没有一个绝对的说法。这里只是提供一个参考。 对于页面的各个结构外层或者特殊部分（比如页面的布局，各个栏目），用id 来说明这个区域是什么内容。对于页面中可重用的结构或者一些常用的从属结构（比如栏目中的标题，文章，列表等），用class来说明这个小块是什么，表现怎么样。 约定：搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。以此类推, L(左边), R(右边), T(上方), B(下方)。不管任何模块, 为避开css 过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为：" .tab .hd " 所有模块, 全部采用hd和bd模式。另外, 用"Tb"代表表格的缩写，比如表单表格: formTb。所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。大量模块使用雅虎的hd和bd命名思想（见‘CSS 书写’ 部分），将内层的css类命名简化，减少起名字的次数。最好不要用id类定义html的模块外观，id类的唯一性比特殊。比如在两个div中，用了相同的 id，js拿id 交互便会出现问题。
1命名规则 （1）项目命名：ISpeakBBS （2）URL上下文命名：ISpeak （3）包命名： 1、util:系统常用的工具包 2、entity:系统实体类 3、biz:业务逻辑层 4、dao:数据访问层（包下面的接口） 5、servlet:控制层 6、filter：过滤器 （4）类命名：根据类的功能命名，如果类名只有一个单词则单词首字母大写，其余小写；如果累名由多个单词构成，则每个单词的首字母大写，其余小写。 1、entity包下面的类：主要和数据库表名相同，首字母大写 例如：Article 文章类 2、dao包下面的接口：和数据库表名一一对应，首字母大写+Dao 例如：ArticleDao 文章接口类 3、biz 包下面的业务逻辑类：和数据库表名一一对应，首字母大写+Biz 例如：ArticleBiz 文章业务逻辑类 4、servlet包下面的类：表名+Servlet，URL映射：表名（有区分是前端还 是后端管理） 例如： a)如游客或其他用户查看时：ArticleServlet，url映射：article b)如用户后台管理，ArticleAdminServlet,URL映射：user\article c)如系统后台管理：ArticleAdminServlet，URL映射：admin\article （5）webroot网站目录结构： 1、images：存放网站所有图片 2、css:存放网址所有样式 3、js:存放JavaScript脚本语言 4、upload:文件上传（以上传的时间日期再划分） 5、admin:系统网站后台文件夹 6、user：个人博客后台文件夹 （6）jsp页面：统一用小写开头。 1、网站前端： a)首页：index.jsp b)注册页面：register.html c)全站热议话题页：topicList.jsp d)文章详细页：article.jsp e)个人评论足迹页：comment.jsp f)个人首页：userIndex.jsp g)文章分类页：articleList.jsp
网页切图过程中div+css命名规则 内容：content/container 导航：nav 侧栏：sidebar 栏目：column 标志：logo 页面主体：main 广告：banner 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 搜索：search 页脚：footer 滚动：scroll 版权：copyright 友情链接：friendlink 子菜单：submenu 内容：content 标签页：tab 文章列表：list 注册：regsiter 提示信息：msg 小技巧：tips 加入：joinus 栏目标题：title 指南：guild 服务：service 状态：status 投票：vote 尾：footer 合作伙伴：partner 登录条：loginbar 页面外围控制整体布局宽度：wrapper 左右中：left right center (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名: (1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 左右中：left right center 页面外围控制整体布局宽度：wrapper (2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop
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
一．文件命名规范 [b]样式文件命名[/b] 重置reset.css [quote]主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 导航：nav 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright
外套：wrap 主导航：mainnav 子导航：subnav 页脚：footer 整个页面：content 页眉：header 页脚：footer 商标：label 标题：title 主导航：mainbav（globalnav） 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 旗志：logo 标语：banner 菜单内容1：menu1content 菜单容量：menucontainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadcrumb(即页面所处位置导航提示）容器：container 内容：content 搜索：search 登陆：Login 功能区：shop(如购物车，收银台) 当前的current[/quote] [b]网站常用中英文对照表[/b] [quote]网站导航Site Map 公司简介Profile or Company Profile or Company 公司设备Equipment Equipment 公司荣誉Glories Glories 企业文化Culture Culture 产品展示Product Product 资质认证Quality Certification 企业规模Scale Scale 营销网络Sales Network 组织机构organization organization 合作加盟Join In Cooperation 技术力量Technology Technology 经理致辞Manager`s oration 发展历程Development History
1. 常用的CSS命名规则 头：header 内容：content/container Chinaz 尾：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 2.注释的写法: 内容区 3. 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
一、命名规则说明： - TOP 1）、所有的命名最好都小写 2）、属性的值一定要用双引号("")括起来，且一定要有值如 class="divcss5",id="divcss5" 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4）、空元素要有结束的tag或于开始的tag后加上"/" 5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等 6）、
CSS规范命名大全集合
CSS规则 一、CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列(font,line-height,letter-spacing,color-text-align等) 4.背景(background,border等) 5.其他(animation,transition等)
二、CSS书写规范 1.使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 2.去掉小数点前的“0” 3.简写命名 很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！
4.16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5连字符CSS选择器命名规范 1）.长名称或词组可以使用中横线来为选择器命名。 2）.不建议使用“_”下划线来命名CSS选择器，为什么呢？ 输入的时候少按一个shift键；浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）
6.不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与cla ss，所以id应该按需使用，而不能滥用。 7.为选择器添加状态前缀 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS标准化命名规则 一、文件命名规范 基本样式：base.css 全局样式：global.css 框架布局：layout.css 字体样式：font.css 链接样式：link.css 打印样式：print.css 二、常用类/ID命名规范页眉：header 内容：content 容器：container 页脚：footer 版权：copyright 导航：menu 主导航：mainMenu 子导航：subMenu 标志：logo 标语：banner 标题：title 侧边栏：sidebar 图标：icon 注释：note 搜索：search 按钮：btn 登录：login 链接：link
信息框：manage …… 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn XHTML-CSS写作建议 1、所有的xhtml代码小写； 2、属性的值一定要用双引号("")括起来，且一定要有值； 3、每个标签都要有开始和结束，且要有正确的层次； 4、空元素要有结束的tag或于开始的tag后加上"/"； 5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border 等； 6、
CSS规范 1.0版2009-10-10 一、总则 (2) 1.1目的及效力 (2) 1.2 CSS书写原则 (2) 二、样式重置 (2) 2.1重置代码 (2) 2.2注意事项 (3) 三、CSS书写顺序 (3) 3.1样式 (3) 3.2注意事项 (3) 四、CSS Hack (4) 4.1样式 (4) 4.2书写顺序 (4) 4.3注意事项 (4) 按住CTRL并单击目录可直接定位
一、总则 1.1目的及效力 1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人 阅读、修改，使之开发效率提高。 2.页面制作人员必须严格遵守此规范。 3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。 4.本规范随时根据需要修订，请注意版本号的变化。当前为1.0版。 1.2 CSS样式书写总规范 1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据 实际情况进行命名、细分。 2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。 3.书写样式时必须先进行样式重置。 4.书写样式时必须按照规定的顺序。 5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不 同浏览器去写不同的CSS。 6.书写样式时可以缩写的样式推荐使用缩写。 二、样式重置 2.1重置代码 /* 样式重置*/ body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; } form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } img { border:0; vertical-align:absbottom; } ul,li { list-style-type:none; } input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/
文件宣传
头部