史上最全!css命名规范(英文命名)
css命名及书写规范
css命名及书写规范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‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
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标准,代码如下：
css命名规范
css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。
在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。
CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。
标签名称也可以使用中划线，但无建议，仍建议使用下划线。
例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。
例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。
例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。
常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。
例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。
例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。
CSS规范命名大全
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.不要随意使用idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与cla ss，所以id应该按需使用，而不能滥用。
7.为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
四、注意事项::1.一律小写;2.尽量用英文;3.不加中槓和下划线;4.尽量不缩写，除非一看就明白的单词。
五、CSS样式表文件命名主要的master.css模块module.css基本共用base.css布局、版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.css网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIVCSS命名规则CSS命名大全内容篇。
css命名规范及简写
css命名规范及简写1通用命名规则a:所有ID或class与数字连接用"_"b:所有ID或Class连接用骆驼规则；如mainNav c:页面主体框架布局命名：Lay_l , Lay_rd:栏目布局容器命名：col_1 col_2e:栏目标题块命名：tit 标签用<h>f:页面所有图片区域用：pic_1 pic_2g:页面文本列表区域全部采用：Lst_1 Lst_nh:页面按钮区域采用：btn_1i:页面广告区域采用：ad_12主体框架命名header (hd)main (main)footer (ft)3通用命名规则主体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav版权：copyright注释：note面包屑：breadcrumb容器：container内容：content当前状态：current侧栏：sidebar菜单：menu子菜单：submenu 滚动：scroll提示技巧：tips指南：guide状态：status投票：vote4 简写：bd : bodyhd : headerfnt : fontnav : navtb : tablelnk : linkmr : margin-right ml : margin-left pd : paddingpr : padding-right pl : padding-left lst : listfl : float:leftfr : float:rightcol : 栏目con : contentfrm : forminf : information lg : logoinp : inputft : footerbtn : buttonmore: moretit : titlespr : 空行t : top;b : bottommid : 中间l : leftr : rightbdr : borderw : widthh : heightmsg : message reg : register(注册)。
css命名规范
css命名规范CSS（CascadingStyleSheets）命名规范是前端开发工程师在编写CSS代码时应遵循的规则和原则，规范的CSS代码可以提高CSS维护的效率和可维护性，而且在大型项目中，一致的CSS命名规范可以帮助开发工程师顺利协作，降低沟通成本。
CSS命名规范是以CSS的语义化作为起点，通过统一的命名方式来增强CSS的语义，使所有的命名保持一致。
语义化命名规范可以更好地提供给未来的维护者，提高代码的可读性和可维护性，从而缩短开发的时间。
具体的CSS命名规范包括：一、class和id的命名1. class和id的准则*一使用小写字母命名*名使用有意义的单词，多个单词之间用_和-连接，不要使用中文或拼音*分大小写* 不要以数字开头2. Class的命名*于class命名应尽可能以根据特定的含义进行命名，保证通用性，如：box、content、title、header、main等*于class的命名也可以根据特定的功能进行命名，如：btn、active、rotate等*于特定的class也可以进行简写，如：nav、hdr、ftr等3. id的命名* id的命名可以尽可能地体现特定的含义，如：logo、header-nav 等；*于特定的模块可以使用特定的命名，如：page-content、page-title等二、变量的命名1.量命名规则*量名使用驼峰式命名，即每个单词以大写字母开头* 不要使用中文或拼音*量名最好有意义* 不要用缩写2.量的命名*于基本的变量名可以尽可能使用根据特定含义进行命名，如：userName、dbName等;*于特定的变量可以根据功能进行命名，如：url、maxWidth等; *于特定的变量可以使用缩写，如：bNum、uLevel等。
三、属性的命名1.性命名规则*性使用小写字母命名*性的命名最好有意义*量使用有意义的属性名，不使用缩写2.性的命名*于基本属性名，尽可能使用有意义的名字，如：font-size、color 等；*特定的属性可以使用缩写，如：bg、bd等。
css起名规范
css起名规范专栏：column元素：element页头：header登录条：loginbar标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service热点：hot新闻：news下载：download注册：register状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink页脚：footer版权：copyright外围wrap列一 column-one列二 column-two页面外围控制整体布局宽度：wrapper 左右中：left right center------------------------------------------------------------------------------------------------------以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。
命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list------------------------------------------------------------------------------------------------------css书写规范一、基本书写规范1、所有的CSS的尽量采用外部调用<LINK href="style/style.css" rel="stylesheet" type="text/css">书写时重定义的最先，伪类其次，自定义最后（其中a:link a:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。
css命名规范
css命名规范CSS(CascadingStyleSheets)义了网页展现方式的规范，是网页布局样式的主要语言。
CSS 代码结构化和易读性是解决 web发问题最关键的部分，而有效的 CSS名规范能够让代码看起来组织良好。
有效的 CSS名规范可以帮助提高网页性能，并且让开发者能够更好地维护和理解代码。
一、CSS命名规则1. 使用有意义的单词CSS名规范允许开发者使用有意义的单词作为名称，这样有助于构建更加优雅和可读性高的代码。
例如，你可以使用“main-wrapper”而不是“wrapper”作为页面主要包装器的命名，这样能够更清晰地表达其意义。
2. 使用缩写在 CSS 代码中，可以根据需要使用缩写。
举例来说，使用“mro”代替“margin-right-only”，这样更容易让你快速地理解变量的意思。
3. 使用驼峰命名法提倡使用驼峰命名法命名 CSS量，这样的变量获得的可读性会更高。
比如，你可以使用“headerWrapper”而不是“header_wrapper”作为页头包装器的命名。
4.免使用缩写在一些情况下，以缩写结尾的命名可能会引起歧义，因此应避免使用缩写来命名 CSS量。
比如，“mt”会被人误解为“margin-top”，而“mend”可能会被人认为是“margin-end”。
5. 使用- (减号)或 _ (下划线)割单词推荐使用- (减号)或 _ (下划线)割多个单词，这样可以方便地辨认单词之间的关系。
例如，“main-wrapper”或“main_wrapper”之类的命名更容易理解，也更加易读。
二、CSS名规范的优点1.于理解CSS名规范有助于更好地理解代码，这样可以更容易地管理和修改代码。
2.高可复用性使用有意义的命名能够大大提高代码的可复用性，开发者可以更容易地把它用在任何情况当中。
3.加有效使用有意义的命名可以缩短代码的书写时间，并且避免重复的错误。
4.于团队合作建立有效的 CSS名规范有助于团队合作，在不同的开发者之间能够有效的传达消息，并能够更快地完成任务。
css 命名规范
css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。
以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。
2. 以字母开头，不以数字开头。
3. 使用有意义的名称，避免使用缩写或简写。
命名应反映元素的功能或用途。
4. 使用短小、精准的名称，不使用冗长或复杂的名称。
二、选择器命名：1. 使用有意义的名称来定义选择器。
例如，使用类名来表示元素的特征或功能。
（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。
可以使用多个类名来表示一个元素的多个特征或功能。
（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。
三、类名命名：1. 使用小写字母或连字符来分隔单词。
例如：.nav-bar，.info-box。
2. 使用有意义的名称来描述元素的功能或用途。
例如：.card，.container。
3. 使用简洁明了的名称，不要出现冗长或复杂的类名。
4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。
四、ID命名：1. 使用小写字母或连字符来分隔单词。
例如：#home-page，#top-header。
2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。
五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。
（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。
3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。
六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。
CSS命名规范
CSS 命名规范css的id与class选择符为设计提供了便利，但也会使得css样式变得多和复杂，如何管理这些css样式便是摆在我们面前的一个问题，然而软件开发的经验为我们提供了一个可学习模仿的例子，软件开发中对于过程/函数/变量的命名经过多年的实践与研究已经有了一套自己的方法，借助这些方法，我们可以根据css的特性设计自己的样式命名规则，帮助我们更好的编写样式，在了解css选择符命名之前，我们先简要了解一下css对于命名的基础使用规则。
在此也说一句，以本人做网站两年的经验觉得，一个网站的整体文件分类页很重要，最终的网页还是以index为名的好，例如我自己做的网站(/index.html)其中的文件都是以文件夹名字归类的，例如（/ye_wu_fan_wei/index.html）就是先以文件夹分类，具体关于html的文件分类问题我会在下一篇文章中发布，敬请关注哈！下面开始充电css吧大小写敏感值得注意的是，xhtml不区分大小写，允许使用大写或小写或任意组合进行编码，css 的样式属性也是如此，我们可以使用大小写的css样式属性，css对于对象选择符如body、td、div也是不区分大小写。
但是css对于id及class选择符名称是区分大小写的。
对于id及class选择符来说class="CONTENT"不等于同css中的.content或.Content。
因此在标识id及class以及编写css样式的时候使用统一的规范来编写自己的样式。
合法字符及组合在css及xhtml中，class及id必须由大写或小写字母开始，随后可以使用任意的字母、数字、连接线或下划线。
合法命名示例如下：content Content CONTENTsite_map site-map_1p_1 p-1非法命名示例如下：2008content _mynav @blue -footer命名建议css虽然算不上是一种程序语言，但是程序语言的命名方式且非常有助于css的使用，良好的命名习惯对于一个Web标准网站的开发来说事半功倍，这里我们将借助于软件开发中常用到的一些命名习惯，结合css的实际应用整理出一些较好的命名习惯供参考使用。
css命名规范
css命名规范CSS（CascadingStyleSheet）是一种用于定义网页表现形式的语言，它可以用来定义用户界面的外观。
在CSS中，我们需要使用有意义的命名来表示不同的元素，以便随后的维护和管理。
只有恰当的CSS命名规范，才能更好地将不同的元素区分开来，有效地保持管理CSS。
为了使得CSS命名能够更有意义，很多专业开发者都建议采用一定的CSS命名规范。
事实上，没有规范的CSS命名可能会导致混乱，从而影响网站的性能和可维护性。
首先，CSS命名规范要求有明确的命名空间，例如由“.class-name”和“#id-name组成的CSS类名和ID。
这样可以避免命名冲突，以及更有效地查找和追踪CSS的来源。
其次，为了使CSS代码更可读，CSS命名规范也应该遵守一定的结构，使其表示出类名的含义。
例如，为了表示导航菜单的宽度，可以使用“nav-menu-width”这样的命名。
同样，结构也可以帮助更有效地检索样式表中的CSS styles。
此外，CSS命名规范也应当更加关注性能和可扩展性。
CSS命名规范应该尽量保证CSS文件的简洁性，避免不必要的冗余或“拼写错误”。
同时，CSS命名规范也应当考虑到不同设备和浏览器对CSS命名的支持情况。
最后，现代CSS命名规范还强调模块化设计，即将网站的样式表分解为几个独立的CSS模块，每个模块都有自己的CSS文件。
这样可以有效地分离管理不同的CSS样式，并使模块之间的分享更加方便。
以上就是关于CSS命名规范的一些基本介绍，现在许多开发者都在尝试使用CSS命名规范，以提高网站的可维护性和性能。
此外，有许多不同的CSS命名规范，如 BEM，OOCSS SMACSS等，可以根据项目的需要来挑选和使用。
CSS规范命名大全概论
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.不要随意使用idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与cla ss，所以id应该按需使用，而不能滥用。
7.为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
四、注意事项::1.一律小写;2.尽量用英文;3.不加中槓和下划线;4.尽量不缩写，除非一看就明白的单词。
五、CSS样式表文件命名主要的master.css模块module.css基本共用base.css布局、版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.css网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIVCSS命名规则CSS命名大全内容篇。
史上最全!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版权：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工程案例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命名规范——BEM思想（非常赞的规范）
CSS命名规范——BEM思想（⾮常赞的规范）⼈们问我最多的问题之⼀是在CSS类名中“--”和“__”是什么意思？它们的出现是源于和...BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由团队提出的⼀种前端命名⽅法论。
这种巧妙的命名⽅法让你的CSS类对其他开发者来说更加透明⽽且更有意义。
BEM命名约定更加严格，⽽且包含更多的信息，它们⽤于⼀个团队开发⼀个耗时的⼤项⽬。
重要的是要注意，我使⽤的基于BEM的命名⽅式是经过。
这篇⽂章中介绍的这种命名技术并不是原始的BEM，但却是⼀个我更喜欢的改进版。
⽆论实际使⽤了什么样的符号，它们其实都是基于同样的BEM原则。
命名约定的模式如下：[css]1. .block{}2. .block__element{}3. .block--modifier{}.block 代表了更⾼级别的抽象或组件。
.block__element 代表.block的后代，⽤于形成⼀个完整的.block的整体。
.block--modifier代表.block的不同状态或不同版本。
之所以使⽤两个连字符和下划线⽽不是⼀个，是为了让你⾃⼰的块可以⽤单个连字符来界定，如：[css]1. .site-search{} /* 块 */2. .site-search__field{} /* 元素 */3. .site-search--full{} /* 修饰符 */BEM的关键是光凭名字就可以告诉其他开发者某个标记是⽤来⼲什么的。
通过浏览HTML代码中的class属性，你就能够明⽩模块之间是如何关联的：有⼀些仅仅是组件，有⼀些则是这些组件的⼦孙或者是元素,还有⼀些是组件的其他形态或者是修饰符。
我们⽤⼀个类⽐/模型来思考⼀下下⾯的这些元素是怎么关联的：[css]1. .person{}2. .person__hand{}3. .person--female{}4. .person--female__hand{}5. .person__hand--left{}顶级块是‘person’，它拥有⼀些元素，如‘hand’。
CSS命名规范
CSS命名规范常⽤的CSS类名包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading尺⼨类： large, middle, small, bigger, smaller组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog位置类： first, last, current, prev, next, forward, back⽂本类： title, desc, content, date, author, category，label，tag⼈物类： avatar, name, age, post, introBEMBEM(Block Element Modifier) 是⼀种命名CSS class的模式，使⽤这种模式可以让 CSS 代码更加利于维护。
标准的 BEM 写法是.block-name__element-name--modifier-name。
vi是命名前缀，vi-card表⽰⼀个block，vi-card_title，_表⽰vi-card下⾯的⼦元素title,--表⽰修饰符，表⽰状态 vi-btn--primary表⽰是普通按钮属性的书写顺序属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。
但是如果顺序保持⼀致的话，扫⼀眼可以很快地知道这个选择器有什么类型的属性影响了它，所以⼀般要把⽐较重要的属性放前⾯。
css命名规范
css命名规范CSS命名规范是编写可维护、清晰和易于理解的CSS代码的关键。
以下是一个长达1000字的CSS命名规范。
1. 选择有意义的名字：命名应该尽量描述元素的作用或内容，使其易于理解、阅读和维护。
避免使用无意义的名字，比如"div1"或"box2"。
2. 使用有意义的单词：选择与元素相关的单词来命名。
使用驼峰命名法或短横线分隔单词。
例如，使用"mainContainer"而不是"main-container"。
3. 避免使用缩写：尽量避免使用缩写，除非是广为认可的缩写，并且不会混淆读者。
例如，使用"navigation"而不是"nav"。
4. 命名模块化：命名应该模块化，使其易于重用和修改。
将样式命名为模块和元素的组合，以便更好地组织代码，并提高代码的重用性。
5. 使用BEM规范：BEM（块、元素、修饰符）是一种流行的CSS命名约定，用于将样式命名为块、元素和修饰符的组合。
例如，.header 是一个块，.header__logo 是一个元素，.header--dark 是一个修饰符。
6. 避免嵌套过深：避免使用过度嵌套的选择器。
嵌套不应该超过3层，否则会导致代码的可读性变差。
考虑使用BEM规范来减少选择器嵌套。
7. 使用语义化的类名：使用有意义的类名来描述元素的含义或目的。
避免使用样式相关的类名，如"red"或"left"，而是使用更加语义化的类名，如"primary"或"align-left"。
8. 使用前缀：使用前缀来指示类名的用途。
例如，使用"btn"作为按钮类名的前缀，"form"作为表单相关类名的前缀。
9. 避免使用ID选择器：尽量避免使用ID选择器来样式化元素。
CSS 命名法
button,input[type="button"]
-button
form
-form
input[type="text"]
-textinput
input[type=checkbox]
-check
input[type=radio]
-radio
#page-menu-news-item
#page-menu-about-item
#page-body-box
#page-body-left-box
#page-body-center-box
#page-body-right-box
#news-portlet-box
#faq-portlet-box
#page-head-menu-box
#page-head-menu-list
#page-head-menu-home-item
#page-head-menu-news-item
#page-head-menu-about-item
#page-menu-box
#page-menu-home-item
.portlet-icon-box
关于h1,h2,h3的使用 ???(还不确定）
h1与h2尽量不使用
模块如果需要heading，用h3
常用ID名
#page-head-box
#page-head-top-box
#page-head-top-left-box
#page-head-top-right-box
-image-box
-icon-box
CSS命名规范
公共样式定义命名一、页面样式组ID容器：顶部容器：top菜单容器：menu主体容器：main尾部容器：foot文章：art留言：msg帮助：help供求：info问答：ask视频：vod产品：pro商品：goods……Class容器：翻页：page评论：comment网站地图：sitemap搜索：search浮动客服：kefu投票：vote评分：rating位置：place树：tree友情链接：link排行：up购物车：cart二、公共样式命名：浮动居左：l浮动居右：r清除浮动：clear水平居左：tl水平居右：tr水平居中：tc垂直居上：vt垂直居中：vm垂直居下：vb字体正常：fn字体加粗：fb字体大小：12象素字/f12、14象素字/f14字体颜色：红色/red、蓝色/blue…..外边距：5象素/ma5、10象素/ma10外下边距：5象素/mb5、10象素/mb10外右边距：5象素/mr5、10象素/mr10......内边距：5象素/pa5、10象素/pa10外下边距：5象素/pb5、10象素/pb10外右边距：5象素/pr5、10象素/pr10……三、伪类样式更多：more回复：replay标题：title时间：time信息：info排序：sort步骤：step购买：buy联系：contact客服：server四、列表样式1、框架结构定位：boxa、boxb、boxc……(结合l、r进行整页结构定位)2、容器标题命名：tita、titb、titc……3、容器命名：suba、subb、subc……ula、ulb、ulc……dla、dlb、dlc……ola、olb、olc……taba、tabb、tabc……(表格)picula、piculb、piculc……(图片列表)Css命名规范1.1 公共部分和经常要用到的样式整个容器：container 外围整体布局： wrap 页头部分：head/header/top 内容：content页脚部分：foot/footer/bottom 栏目：column 主体部分：main左/中/右三栏：main_left/main_mid/main_right或者main_l/main_m/main_r 侧栏：sidebar左右两栏：siderbar_l/sidebar_r或者leftsidebar/rightsidebar 左中右：left/center/right 侧导航：sidenav左/右导航：leftsidenav/rightsidenav 子导航：subnav 菜单：menu 子菜单：submenu 标题：title 摘要：summary 下拉：drop下拉菜单：dropmenu 搜索：search 热门搜索：hotsearch 关键字：keyword 搜索输入框：search_input 搜索条：searchbar 友情链接：friendlink/link 版权信息：copyright 投票：vote 合作伙伴：partner 服务：service 指南：guid 网站信息：siteinfo 网站地图：sitemap 网站帮助：sitehelp 法律声明：siteinfolegal 信誉：siteinfocredits 加入我们：joinus 关于我们：aboutus 联系我们：contactus 小技巧：tips 注释：note当前的：current 标签页：Tab 文章列表：List 提示信息：Msg 滚动：scroll 工具条：toolbar/tool 时间：time 日期：data 热点：hot 新闻：news 注册：Regsiter 状态：Status 按钮：Btn 下载：download 产品：products/pro 缩略图：screenshot。
css命名规范及项目文件目录
css命名规范及项⽬⽂件⽬录
1. 必须使⽤英⽂开头,并且开头字母⼀律⼩写
2. 所有的命名最好都⼩写
3. 尽量不要⽤缩写英,除⾮可以⼀⽬了然的
4. 如果遇到相差不⼤ class或者id,主功能识别字母在前,位置识别字母在后,位置识别字母;第⼀个可⼤写(如: navTop, menuLeft)
5. 遵循驼峰命名法:第⼀个单词的⾸字母⼩写,其余每⼀个有意义的单词的⾸字母⼤写(如:studentInfo, getElementById)
名称标准
头header
内容content/container
尾footer
导航nav
侧栏sidebar
栏⽬column
页⾯外围控制整体布局宽度wrapper
左右中left right center
登录条loginbar
标志logo
⼴告banner
页⾯主体:
热点hot
新闻news
下载download
⼦导航subnav
菜单menu
⼦菜单submenu
搜索search
友情链接friendlink
页脚footer
版权copyright
投票vote
合作伙伴partner
滚动scroll
内容content
标签页tab
⽂章列表list
提⽰信息msg
⼩技巧tips
栏⽬标题title
加⼊joinus
指南guld
服务service
注册regsiter
状态status
⼀个完整的⽂件⽬录包含如下⽂件:file{css/images/js/audio/video/font/index.html}。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
史上最全！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]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框则应命名为“searchInput ”、“搜索图标”命名这“searchIcon ”、“搜索按钮”命名为SearchBtn ” .......一. 常规书写规范及方法1. 选择DOCTYP：EXHTML 1.0提供了三种DTD声明可供选择：过渡的(Transitional): 要求非常宽松的DTD它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法) 。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN ”“/TR/xhtml1/DTD/xhtml1-transitional.dtd “>严格的(Strict): 要求严格的DTD你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN ”“/TR/xhtml1/DTD/xhtml1-strict.dtd “>框架的(Frameset):专门针对框架页面设计使用的DTD如果你的页面中包含有框架，需要采用这种DTD完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN ”“/TR/xhtml1/DTD/xhtml1-frameset.dtd “>理想情况当然是严格的DTD但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional) 是目前理想选择(包括本站，使用的也是过渡型DTD)。
因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：为文档指定语言：<html xmlns= ”/1999/xhtml lang= ”en ”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv= ”Content-Type ”content= ”text/html; charset=utf-8 ff />标准的XML文档语言定义:<?xml version= ”.0 " encoding= " utf-8 "?> 针对老版本的浏览器的语言定义：<meta http-equiv= "Content-Language ” content= ” utf-8 " />为提高字符集，建议采用“utf-8 ”。
3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head 区。
如：<style type= "text/css ”<! - body { background : white ; color : black ; } -> </style> 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面head 区用类似以下代码调用。
<link rel= ”stylesheet ”rev= ”stylesheet ”href= ”css/style.css ”type= ”text/css ”media= ”all ”/>在符合web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变页面的样式。
如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。
例如，使用P 元素来包含文字段落，而不是为了换行。
如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。
少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。