常用CSS命名参考资料
css常用命名
网站头部: head/header(头部) top（顶部）
导航： nanv 导航具体区分：topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级航)
旗帜、广告和商标：logo（旗帜）、brand(商标)、banner(标语)
实际上上面的id命名我会经常用大小写和_来区分，比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名，比如写一个红色字体的class,可以
.f_red {}(f是font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。
文章来自: 本站原创
引用通告地址: /rackback.aspx?ID=39
Tags:
搜索：sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput（搜索输入框）
注册和登录：login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)
布局、分栏和框： layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)
另外使用"in"的写法做子divd的命名，写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如top_in、box_in、from_in、login_in等等。
史上最全!css命名规范(英文命名)
史上最全！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版权copyrightwrap mainnav subnav footer content header footerlabel title mainbav ( globalnav ) topnav sidebarleftsidebar rightsidebar logo banner menu1contentmenucontainer submenu sidebarIcon注释： note面包屑： breadcrumb （ 即页面所处位置导航提示） 容器： 内容： 搜索： 登陆： 功能区： containercontentsearch Loginshop( 如购物车，收银台 ) 当前的 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 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training 游乐园Amusement Park 在线交流Online Communication 专题报道Special Report[/quote]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
CSS ID以及类名 常用命名方式和习惯
投票：vote
合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
ห้องสมุดไป่ตู้ 加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
CSS命名规范和CSS书写规范和方法
一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；模块module.css主题themes.css专栏columns.css表单forms.css补丁mend.css二．常用类/ID命名规范页面外围控制整体布局宽度：wrapper 页眉：header内容：content左右中：left right center容器：container页脚：footer版权：copyright导航：nav主导航：mainNav子导航：subNav菜单：menu主菜单：mainMenu子菜单：subMenu标志：logo标语广告：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link友情链接：friendlink信息框：manage热点：hot新闻：news下载：download滚动：scroll标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn。
CSS样式表各区块用注释说明，尽量不加中杠和下划线，尽量不缩写，除非一看就明白的单词。
一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
css命名规则
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。
六.多重CSS样式定义，属性追加重复最后优先原则
我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？
页面存在多个相同的ID影响就是不能通过W3的校验，JS用到多个ID就会错误！
三.使用css缩写
1、margin:1em 0 2em 0.5em; 分别是外边距上、右、下、左；
2、边框：border:1px solid #000;，是border-width:1px;border-style:solid;border-color:#000;的缩写；
一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：
我们先定义两个样式
.one{width:200px;}
.two{border:10px solid #000;}
在页面代码中，我们可以这样调用:
<div class=one two></div>最后优先原则；
<!--[if IE]>
<link rel=stylesheet type=text/css href="/style/ie.css" />
<![endif]-->
还有更多的CSS hack大家可以通过网上找找，但是有很多hack都是不符合w3c标准的，本人根据以上的hack写了一个能区分IE6、IE7、FF的样式，而且可以符合w3c标准,代码如下：
CCS样式命名
CCS样式命名命名规则1. 所有的命名最好都⼩写2. 属性的值⼀定要⽤双引号("")括起来，且⼀定要有值如class="divcss5",id="divcss5"3. 每个标签都要有开始和结束，且要有正确的层次，排版有规律⼯整4. 空元素要有结束的tag或于开始的tag后加上"/"5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等6. <h1>到<h5>的定义，应遵循从⼤到⼩的原则，体现⽂档的结构，并有利于搜索引擎的查询。
7. 给每⼀个表格和表单加上⼀个唯⼀的、结构标记id8. 给图⽚加上alt标签9. 尽量使⽤英⽂命名原则10. 尽量不缩写，除⾮⼀看就明⽩的单词tips：1.尽量考虑为元素命名其本⾝的作⽤或”⽤意”，达到语义化。
不要使⽤表⾯形式的命名.如:red/left/big等。
2.组合命名规则:[元素类型]-[元素作⽤/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互⾏为的元素命名:凡涉及交互⾏为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:⿏标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited常⽤命名页⾯结构命名：容器：container 页头：header 内容：content/container页⾯主题：main 页尾：footer 导航：nav侧边栏：sidebar 栏⽬：column 页⾯外围控制整体宽度：wrapper导航：主导航：mainnav ⼦导航：subnav 顶导航：topnav边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar菜单：menu ⼦菜单：submenu 标题: title 摘要: summary功能：标志：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版权：copyrightclass 的命名:1. 颜⾊:使⽤颜⾊的名称或者16进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }2. 字体⼤⼩,直接使⽤"font+字体⼤⼩"作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }3. 对齐样式,使⽤对齐⽬标的英⽂名称,如 .left { float:left; }.bottom { float:bottom; }4. 标题栏样式,使⽤"类别+功能"的⽅式命名,如 .barnews { } .barproduct { } 注意事项: 1.⼀律⼩写; 2.尽量⽤英⽂; 3.不加中杠和下划线;。
css常用类名
css常⽤类名1. 1.页⾯结构容器: container页头：header内容：content/container页⾯主体：main页尾：footer导航：nav侧栏：sidebar栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center2. 2.导航栏相关导航：nav主导航：mainnav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu标题: heading⼦标题：subHeading摘要: summary3. 3.功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标签页：tab⽂章列表：list提⽰信息：message当前的: current⼩技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：friendlink版权：copyright4. 4.样式⽂件命名主要的 main.css模块 module.css基本共⽤ base.css布局 layout.css主题 themes.css专栏 columns.css ⽂字 font.css表单 forms.css补丁 mend.css打印 print.css。
(CSS面试知识点)CSS的命名规范与组织方式
(CSS面试知识点)CSS的命名规范与组织方式CSS的命名规范与组织方式CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页外观样式的语言，具有重要的作用。
在进行CSS开发时，命名规范与组织方式是非常重要的，它们可以提高代码的可维护性和可读性，使工作更加高效。
本文将介绍一些常见的CSS命名规范和组织方式。
I. 命名规范在编写CSS代码时，命名规范是必不可少的，它有助于团队成员之间的协作，也方便日后的维护和更新。
下面是一些常见的CSS命名规范：1. 使用有意义的命名：选择能够准确描述元素的命名，避免使用无意义的名称，例如使用类名".box1"或者".c1"并不能清晰地表达元素的含义，可以使用".header"或者".menu"更加具有可读性。
2. 使用小写字母和连字符：为了提高代码的可读性，建议使用小写字母来书写CSS命名，并使用连字符来分隔单词，例如".main-container"。
3. 避免使用数字作为开头：在CSS命名中，应避免使用数字作为选择器的开头，因为这可能会与其他命名方式产生冲突。
4. 使用BEM命名方法：BEM（Block Element Modifier）是一种常见的CSS命名方法，它将选择器分为块（block）、元素（element）和修饰符（modifier）。
例如，".header"可以表示为一个块，".header__logo"可以表示为块中的元素，而".header--light"可以表示为块的修饰符，这样的命名方式可以提高代码的可维护性。
5. 避免命名继承：在CSS中，应避免使用过于具体的命名继承，例如使用".red-text"来表示红色文本样式。
这样的命名方式可能导致代码的重用性下降，建议使用更加抽象的命名，例如".highlight"，通过添加修饰符来改变元素的外观。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在XHTML中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。
所以，CSS命名仅作参考。
(1)页面结构类容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper(2)导航类导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar位置导航：crumb菜单：menu子菜单：submenu面包屑：breadcrumb(即页面所处位置导航提示)(3)网页内容类标题: title摘要: summary箭头：arrow商标：label网站标志：logo转角/圆角：corner 横幅广告：banner 栏目：column子菜单：subMenu 搜索：search搜索框：searchBox 登录：login工具条：toolbar下拉：drop标签页：tab当前的：current列表：list滚动：scroll服务：service提示信息：msg新闻：news小技巧：tips下载：download栏目标题：title热点：hot加入：joinus注册：regsiter指南：guide友情链接：friendlink状态：status版权：copyright按钮：btn合作伙伴：partner投票：vote头：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摘要: 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(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词. 主要的master.css模块module.css基本共用base.css布局，版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.css头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper 左右中：leftrightcenter登录条：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*/内容区/*EndFooter*/(三) id的命名：(1)页面结构容器：container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper 左右中：leftrightcenter(2)导航：导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar子菜单：submenu 标题:title摘要:summary (3)功能：标志：logo广告：banner登陆：login登录条：loginbar 注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的:current小技巧：tips图标:icon注释：note服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright(四) class的命名：(1)颜色：使用颜色的名称或者16进制代码，如：以下为引用的内容：.red{color:red;}.f60{color:#f60;}.ff8600{color:#ff8600;}(2)字体大小，直接使用“font+字体大小”作为名称，如：以下为引用的内容：.font12px{font-size:12px;}.font9pt{font-size:9pt;}(3)对齐样式，使用对齐目标的英文名称，如：以下为引用的内容：.left{float:left;}.bottom{float:bottom;}(4)标题栏样式，使用”类别+功能”的方式命名，如：以下为引用的内容：.barnews{}.barproduct{}(五) 文件名命名：主要的：master.css模块：module.css基本共用：base.css布局，版面：layout.css主题：themes.css专栏：columns.css文字：font.css表单：forms.css补丁：mend.css打印：print.css(六) 注意事项：(1)一律小写。
(2)尽量用英文。
(3)不加中杠和下划线。
(4)尽量不缩写，除非一看就明白的单词。