CSS命名及书写规范

css命名规范一、引言 (2)1.1目的 (2)1.2 CSS编写注意事项 (2)二、CSS命名规范 (2)2.1文件命名规范 (2)2.2公用样式申明： (2)2.3框架架样式类名命名规范 (3)2.4样式类别命名规范 (4)2.5模块或文档命名规则 (4)2.6色彩、字体、字号等命名规则 (5)三、代码规范 (5)3.1 HTML 代码 (5)3.2 CSS ............................................................................................. 错误！未定义书签。

按住CTRL并单击目录可直接定位引言1.1目的1. 制订本规范的目的是使CSS规范化、统一化。

2. 页面制作人员必须严格遵守此规范。

3. 木规范随时根据需要修订，请注意版木号的变化。

当前为1.0版°1.2 CSS编写注意事项1. 在编写html的时候同时带上class屈性；2. 无css样式时，可让css保留空白；当样式完成后，能直接看到效果，基本不用修改htmlo二、CSS命名规范2.1文件命名规范1. 当公用样式、框架样式内容不是很多时，整站全局样式、公共样式写在同一个css±, 命名为global.css （常用，一般都写一个上就ok）；2. 当公用样式、框架样式内容很多时，可以分为两个css文件，一个文档类的公用样式可以命名为doc.css；一个为框架样式为global.css;2.2公用样式申明：1. 公用样式需保留部分，当然可以进行适当修改使用（比如字体、文字大小、颜色等）:body{ margin :0px; padding :0px; borderzOpx; font-size :12px;font-family:”宋体”；backgroundbody, div, dl, dt, dd, ul, li, hi, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend,button, textarea, blockquote,p{ margin: 0; padding: 0; line-height:24px;）img（ borderzOpx;}a{ text-decoration:none; color:#333;}a:hover{ text-decorationzunderline; color:#fOO;}ul,dl{ list-style:none;}table { border-collapse: collapse; border-spacing: 0; border-collapsezcollapse;empty-cell:show;）备注：这里清楚一些本身所带的样式结构、统一样式；1）比如清除掉H标签的字体大小；2）a标签只在鼠标经过的时候才有下划线；3）图片边框为04）Table、p、button 标签没边距5）统一行高、字体大小、字体2.3框架架样式类名命名规范global.CSS公用样式，以下是线框结构颜色（红框为class为wrap）topheadernavleft middle right main mainLt rightleft mainRt footer1. top：顶部模块（顶部横条用于补充、快捷导航或说明文字，可有可无）2. header：头部模块（用于头部放logo等）3. nav:主导航4. wrap：主要内容容器5. left：主要内容左边模块6. middle：主要内容中间模块7. right：主要内容右侧模块8. main：主干模块9. mainleft：靠左主干模块10. mainright：靠右主干模块11. footer：底部模块2.4样式类别命名规范1. logo：网站logo2. nav：导航（只有一级菜单可用，有一级以上用下面规则）3. menu：菜单4. hidden：默认隐藏5. menu-con:菜单内容6. login：登录7. register：注册8. search:搜索9. keyword：搜索关键字10. range：搜索范围11. tag-title：标签标题12. tag-con：标签内容13. title：标题14. content：内容15. list：列表16. current：当前位置17. icon：图标18. comment：评论19. more：更多2.5模块或文档命名规则规则：［页面・］模块-具体内容，中间用短横线区分如1： college.css （未缩写）命名规则：1）college-lt （专家答疑左侧）2）college-md （专家答疑中问）3）college-rt （专家答疑右侧）如2： info.css （缩写）命名规则：info-left > info-left-list I A info-title如3： info-left-list 1 （资讯页面的左侧的第一个列表）2.6色彩、字体、字号等命名规则1. red、bull……用颜色名称直接定义2. cn、en 一般就区别中英文字体（一般也不怎么用到，按规定好的字体就可以了）3. fl4px、fl6px、fl8px ........... 字体为14px、16px、18px （一般默认字体12px 可在规定所有样式里面定义）4. fontbold：字体加粗5. fontitalic：斜体•2.7部分内容英文单词1. form表单（例：内容表单具体项content-form-address）2. contact联系人3. address 地址4. price 价格5. deta i I 明细6. i nformat i on 消息7. link链接8. dash横线9. remarks 备注10. browse 浏览11. source 来源12. check 查看三、代码规范3.1 HTML 代码1. 对页面添加class属性，样式都写在class属性上，id属性留个js 如：vdivclass=”content”>v/div>2. 如果有需要同时定义两个样式，中间用空格隔开如：<div class=,,content buir,x/div>。

CSS命名规范参考及书写注意事项，这里整理的比较全，web前端开发的朋友非常值得参考下。

CSS书写顺序*{/*显示属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*文字*/colorfontcontent/*边框背景为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。

*/borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-positioncolorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；主要的master.css专栏columns.css主题themes.css主要的master.css模块module.css基本共用base.css表单forms.css补丁mend.css二．页面结构容器: container页头：header内容：content页面主体：main页尾：footer栏目：column页面外围控制整体布局宽度：wrapper 左右中：left right center三．导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu摘要: 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版权：copyrightContainer div#container容器Layout#layout布局Header or banner div#head, #header页头部分Footer div#foot, #footer页脚部分Navigation list#nav主导航Sub-navigation list#subNav二级导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns #sidebar_a, #sidebar_b左边栏或右边栏Main div#main页面主体Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#voteFriend Link#friendlink友情连接Title#title标题Summary#summary摘要Search input#searchInput搜索输入框Search output#search_output搜索输出和搜索结果相似Search#search搜索Search bar#searchBar搜索条Search results#search_results搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#logoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us加入我们Partnership opportunities #partner合作伙伴Services#service服务Regsiter#regsiter注册Arrowarr/arrow箭头Little#little标题Website map#sitemap网站地图List#list列表Home page#homepage首页Sub pagesubpage二级页面子页面Toolbar#tool, #toolbar工具条Next pulls#drop下拉Next pulls menu#dorpmenu下拉菜单Status#status状态Container div#container容器Header or banner div#header页头部分Main or global navigation div #mainNav主导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns#sidebarA, #sidebarB左边栏或右边栏Main div#main页面主体Content div#content内容部分The main content area#contentMain主要内容区域Footer div#footer页脚部分Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#vote投票Friend Link#friendlink友情连接Title#titleSummary#summary摘要Sub-navigation list#subNav二级导航Search input#searchInput搜索输入框Search output#searchOutput搜索输出和搜索结果相似Search#search搜索Search results#searchResults搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#brandingLogoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us#joinus加入我们Partnership opportunities #partner合作伙伴Services服务Regsiter#regsiter注册Status#status状态Products.products产品Products prices.productsPrices产品价格Products description .productsDescription 产品描述Products review.productsReview产品评论Editor’s review.editorReview编辑评论New release.newsRelease最新产品Publisher.publisher生产商Screen shot.screenshot缩略图FAQ.faqs常见问题Keyword.keyword关键词Blog.blog博客Forum.forum论坛五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 { }XHTML-CSS写作建议1. 所有的xhtml代码小写2. 属性的值一定要用双引号(“”)括起来，且一定要有值3. 每个标签都要有开始和结束，且要有正确的层次4. 空元素要有结束的tag或于开始的tag后加上“/”5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border 等6. <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

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命名规范和CSS书写规范CSS命名规范一、文件命名规范全局样式：global.css 主要的：master.css 框架布局：layout.css 模块样式：module.css 字体样式：font.css 公用的：base.css表单样式：forms.css 主题样式：thmems.css 链接样式：link.css 专栏样式：column.css 打印样式：print.css 补丁样式：mend.css 二、常用类/ID命名规范页头：header 菜单：menu内容：content 主菜单：mainMenu 容器：container 子菜单：subMenu 主题：main 导航：nav页脚：footer 主导航：mainNav 版权：copyright 子导航：subNav页面外围控制整体布局宽度：侧边栏：sidebar wrapper 友情链接：friendLink 标志：logo 列表：list标语：banner 提示信息：msg标题：title 小技巧：tips图标：Icon 加入：joinus注释：note 指南：guild搜索：search 服务: service按钮：btn 热点：hot登录条：loginbar 下载：download 信息框：manage 注册：regsiter滚动：scroll 状态：status标签页：tab 投票：vote当前的：current 摘要：Summary功能区：shop 提示信息：msg新闻：news 合作伙伴：parter备：一律小写；尽量用英文；不加中杠和下划线；尽量不用缩写，除非一看就明白的单词。

常用类的命名应尽量以常用英文单词为准，做到通俗易懂，并在适当的地方加以备注。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名为“searchIcon”、“搜索按钮”命名为“searchBtn”三、css|规范|网页直观命名当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

css命名规范CSS（层叠样式表）技术一直是Web开发者们进行前端开发的重要工具之一。

它可以为网页提供美观的外观，并且也可以提升网站的可用性。

在进行前端开发时，对于CSS文件定义和命名是一个非常重要的环节。

给CSS文件定义一个有意义的名字，可以帮助开发者理解文件的作用，以及里面定义的样式。

CSS文件的命名有不同的规范，这些规范的重要性不容忽视。

有意义的命名规范不仅可以帮助开发者在未来能够快速定位文件，而且也可以更加有效的维护网站的可读性。

下面将介绍几种常用的CSS命名规范。

1.写字母和数字组合：一种命名规范是使用最多的。

它非常简洁，便于区分。

通常使用小写字母和数字组合来命名CSS文件和样式，并且使用横线（-）做为连接符。

比如：style-sheet.css，button-style.css，footer-style.css等。

2. 使用驼峰式命名：峰式的命名法是一种英文单词的写法，它由单词的第一个字母小写开始，而每个单词的首字母都大写开始。

比如：styleSheet.css，buttonStyle.css，footerStyle.css等。

3. 使用短横线分隔：种命名方式使用了一个短横线将CSS文件和样式分隔，并且使用小写字母和数字组合命名CSS样式。

比如：style-sheet_button.css，style-sheet_footer.css等。

4. 使用下划线分隔：与前一种方式类似，这种方式也是使用小写字母和数字组合命名CSS样式，只是使用下划线（_）做为分隔符。

比如：style_sheet_button.css，style_sheet_footer.css等。

基本上，NASA等大型机构制定的CSS命名规范会以上述四种规范为主，有时会结合多种规范使用，以满足CSS文件的苛刻要求。

下面着重介绍一些常见的CSS命名规范。

1.名时尽量使用有意义的名称：命名时，尽量使用有意义的名称，而不是简单的数字或者字母。

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的优先级优先与class，所以id应该按需使⽤，⽽不能滥⽤。

7.为选择器添加状态前缀有时候可以给选择器添加⼀个表⽰状态的前缀，让语义更明了，⽐如下图是添加了“.is-”前缀。

三、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标签：tags⽂章列表：list提⽰信息：msg⼩技巧：tips栏⽬标题：title加⼊：joinus服务：service注册：regsiter状态：status投票：vote合作伙伴：partner注释的写法:/* Header */内容区/* End Header */id的命名:1)页⾯结构容器: container页头：header内容：content/container页⾯主体：main页尾：footer导航：nav侧栏：sidebar栏⽬：column页⾯外围控制整体佈局宽度：wrapper 左右中：left right center(2)导航导航：nav主导航：mainnav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu标题: title摘要: summary(3)功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标籤页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright四、注意事项::1.⼀律⼩写;2.尽量⽤英⽂;3.不加中槓和下划线;4.尽量不缩写，除⾮⼀看就明⽩的单词。

由于项目中‎编写文档结‎构、编写CSS‎的人员较多‎，并与程序员‎协同工作，所以就需要‎统一开发规‎范，根据XHT‎M l和CS‎S编织的规‎范和大多人‎的习惯，整理了以下‎针对本项目‎的一个简单‎的开发规范‎：一、CSS文件‎及样式命名‎1、CSS文件‎命名规范全局样式：globa‎l.css；框架布局：layou‎t.css；字体样式：font.css；链接样式：link.css；打印样式：print‎.css；2、CSS样式‎命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母‎开头，不能为纯数‎字。

为了开发后‎样式名管理‎方便，大家请用有‎意义的单词‎或缩写组合‎来命名，让同事一看‎就明白这样‎式大概是哪‎一块的，这样就节省‎了查找样式‎的时间，例如：头部样式用‎h eade‎r，头部左边，可以用he‎a der_‎l eft或‎h eade‎r_l,还有如果是‎列结构的可‎以这样——box _1of3‎(三列中的第‎一列)，box_2‎o f3 (三列中的第‎二列)、box _3of3‎(三列中的第‎三列)，其它的我就‎不一一举例‎了，大家按以上‎规律去命名‎就好。

下面列出一‎些常用的命‎名单词方便‎大家使用：（以后大家工‎作过程中慢‎慢把自己积‎累的单词都‎共享出来，那大家的命‎就会更加统‎一了，就不会有一‎义多词的情‎况了。

）容器：conta‎i ner/box头部：heade‎r主导航：m ainN‎a v子导航：subNa‎v顶导航：topNa‎v网站标志：logo大广告：banne‎r页面中部：m ainB‎o dy底部：foote‎r菜单：menu菜单内容：m enuC‎o nten‎t子菜单：subMe‎n u子菜单内容‎：subMe‎n uCon‎t ent搜索：searc‎h搜索关键字‎：keywo‎r d搜索范围：range‎标签文字：tagTi‎t le标签内容：tagCo‎n tent‎当前标签：tagCu‎r rent‎/curre‎n tTag‎标题：title‎内容：conte‎n t列表：list当前位置：curre‎n tPat‎h侧边栏：sideb‎a r图标：icon注释：note登录：login‎注册：regis‎t er列定义：colum‎n_1of‎3(三列中的第‎一列)colum‎n_2of‎3(三列中的第‎二列)colum‎n_3of‎3(三列中的第‎三列)二、id和cl‎a ss的使‎用及区别我们知道在‎样式表定义‎一个样式的‎时候，可以定义i‎d也可以定‎义clas‎s，例如：ID方法：#test{color‎:#33333‎3}，在页面中调‎用<div id="test">内容<div>CLASS‎方法：.test{color‎:#33333‎3}，在页面中调‎用<div class‎="test">内容<div>id一个页‎面只可以使‎用一次，class‎可以多次引‎用。

web前端开发企业级CSS常⽤命名，书写规范总结1.常⽤命名标题: title 摘要: summary 箭头： arrow 商标： label ⽹站标志： logo 转⾓/圆⾓： corner 横幅⼴告： banner ⼦菜单： subMenu　搜索：search 搜索框： searchBox 登录： login 登录条：loginbar ⼯具条： toolbar 下拉： drop 标签页： tab 当前的： current 列表： list　滚动：scroll 服务： service 提⽰信息： msg 热点：hot 新闻： news ⼩技巧： tips 下载： download 栏⽬标题： title 热点： hot 加⼊： joinus　注册： regsiter　指南： guide 友情链接： friendlink 状态： status　版权： copyright 按钮： btn　合作伙伴： partner 投票： vote　左/右/中：left/right/center　简介：profiles 评论：comment2.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 版权：copyright3.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 { }推荐的CSS书写顺序相关的属性声明应当归为⼀组，并按照下⾯的顺序排列：PositioningBox modelTypographicVisual由于定位（positioning）可以从正常的⽂档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在⾸位。

(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"，通过添加修饰符来改变元素的外观。

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(注册)。