CSS命名规范参考及书写注意事项
CSS语义化标准
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”、“搜索按钮”命名为“searchBtnXHTML-CSS写作建议1、所有的xhtml代码小写；2、属性的值一定要用双引号("")括起来，且一定要有值；3、每个标签都要有开始和结束，且要有正确的层次；4、空元素要有结束的tag或于开始的tag后加上"/"；5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等；6、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询；7、给每一个表格和表单加上一个唯一的、结构标记id；8、给重要的区块加上注释；9、给图片加上alt属性；10、所有的标签必须进行合理的嵌套；11、根元素前必须有元素，宣告使用那一种DTD；12、根元素必须有xmlns属性来指定使用/1999/xhtml的namespace。
三、常规书写规范及方法1、选择DOCTYPEXHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
网页制作的目录文件及CSS命名规范
网页制作的目录文件及CSS命名规范第一部分：目录、文件、CSS命名方式：文件夹与文件名称、CSS样式命名、程序中的一些控件等等：名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主（不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂）。
尽量用一些大家都能看懂的词汇。
使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。
而且当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
例如：images(图形文件)，flash（Flash文件）等。
命名方式：（性质_描素_位置_分类_数量）项相结合，采用简写、组合的方式形成通用规则。
例如：news (性质)news_title (性质_描素)news_title_top (性质_描素_位置)news_title_top_01 (性质_描素_位置_数量)news_title_top_a_01 (性质_描素_位置_分类_数量)news_title_top_b_01 (性质_描素_位置_分类_数量)常用目录名：data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式)等……常用CSS名：页面外围控制整体布局宽度：wrapper；头：header；内容：content/container；页面主体：main；侧栏：sidebar；尾：footer等……,更多命名查看: 《div+css 命名规则》第二部分：结构（XHTML）网站的前端结构与表现分离，达到95%以上。
正式上线后的网页代码结构要清晰、明朗，容易阅读，布局与结构的镶套尽量控制在4-5层以内，严格遵循w3c的xhtml1.0 Transtitonal。
前端命名规范
前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。
下面是一些常见的前端命名规范：1. 文件和文件夹命名规范- 文件名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：index.html, main.css。
- 文件夹名也应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：images, scripts。
2. HTML/CSS命名规范- HTML和CSS中的类名和ID名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：header-wrapper, main-content。
- 避免使用无意义的命名，应该根据元素的作用和意义来命名。
3. JavaScript命名规范- 变量和函数名应该使用驼峰式命名法，即第一个单词的首字母小写，后面的单词的首字母大写，例如：firstName, getUserInfo。
- 常量名应该使用全大写字母，多个单词之间使用下划线“_”分隔，例如：MAX_NUM, API_URL。
- 类名应该使用帕斯卡命名法，即所有单词的首字母都大写，例如：Person, UserService。
4. 图片命名规范- 图片命名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：logo.png, slide-image.jpg。
5. URL命名规范- URL路径应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：/news-list, /contact-us。
6. Git分支和提交规范- Git分支名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：feature/login,hotfix/bug-fix。
- Git提交消息应该简明扼要地描述所做的更改，可以包括关键词和操作，例如：Add login form validation, Fix broken link。
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 bem写法
css bem写法BEM（Block Element Modifier）是一种CSS命名规范，用于描述网页上元素的层级关系。
BEM由三个部分组成：块（Block）、元素（Element）和修饰符（Modifier）。
在BEM中，块是最高级别的组件，表示一个独立的、可复用的组件。
元素是块中的子组件，修饰符是用来描述块或元素的特定状态或行为。
以下是BEM的书写规范：1. 块：使用单个单词表示，首字母大写，后面使用双下划线。
例如：`block__element`。
2. 元素：使用`block__element`的形式表示，其中`block`是父组件的名称，`element`是子组件的名称。
例如：`.block__element`。
3. 修饰符：使用单个单词表示，后面使用双下划线。
例如：`.block__element--modifier`。
以下是一个示例：```css/ 块 /.block {/ 块的内容 /}/ 元素 /.block__element {/ 元素的内容 /}/ 修饰符 /.block--modifier {/ 修饰符的内容 /}```在HTML中，可以使用相同的类名来应用样式。
例如：```html<div class="block"><div class="block__element">元素</div> </div><div class="block--modifier">修饰符</div> ```。
css命名规范
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.名时尽量使用有意义的名称：命名时，尽量使用有意义的名称，而不是简单的数字或者字母。
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样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。
后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。
下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。
解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。
布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7. 给每一个表格和表单加上一个唯一的、结构标记id8. 给重要的区块加上注释,如：9. 给图片加上alt标签10. 所有的标签必须进行合理的嵌套11. 根元素前必须有元素，宣告使用那一种DTD12. 根元素必须有xmlns属性来指定使用/1999/xhtml的namespace一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。