css规范文档

CSS编码规范CSS编码规范1 前⾔本⽂档的⽬标是使CSS代码风格保持⼀致，容易被理解和被维护。

虽然本⽂档是针对CSS设计的，但是在使⽤各种CSS的预编译器(如less、sass、stylus等)时，适⽤的部分也应尽量遵循本⽂档的约定。

2 代码风格2.1 ⽂件[建议] CSS⽂件使⽤⽆BOM的UTF-8编码。

解释：UTF-8 编码具有更⼴泛的适应性。

BOM 在使⽤程序或⼯具处理⽂件时可能造成不必要的⼲扰。

2.2 缩进[强制] 使⽤4个空格做为⼀个缩进层级，不允许使⽤2个空格。

⽰例：.selector {margin: 0;padding: 0;}2.3 空格[强制] 选择器与{之间必须包含空格。

⽰例：.selector {}[强制] 属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。

⽰例：margin: 0;[强制] 列表型属性值书写在单⾏时，,后必须跟⼀个空格。

⽰例：font-family: Arial, sans-serif;2.4 ⾏长度[强制] 每⾏不得超过120个字符，除⾮单⾏不可分割。

解释：常见不可分割的场景为URL超长。

[建议] 对于超长的样式，在样式值的空格处或,后换⾏，建议按逻辑分组。

⽰例：/* 不同属性值按逻辑分组 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat 0 0;/* 可重复多次的属性，每次重复⼀⾏ */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)));2.5 选择器[强制] 当⼀个 rule 包含多个 selector 时，每个选择器声明必须独占⼀⾏。

由于项目中‎编写文档结‎构、编写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‎可以多次引‎用。

Css规范：1.Css文件可按模块或核心功能来划分，核心模块里面是一些常用css（公共部分应该提取出来）2.作为javascript钩子的样式使用js_作前缀如：<button class="js_add_to_cart add-item">Add to Cart</button>3.作为javascript向页面添加和删除的样式使用is_作为前缀如：<ul><li class=”is_active”></li><li></li></ul>4.css文件的命名规范，如首页front_page.css，统一以下划线分割，避免大写（文件必须使用UTF-8）5.导入css统一使用link标签，页内样式使用style，link 和style标签都应当放在head中6.应当尽量避免行内样式7.层级样式尽量保证最多不超过4层级8.Html代码也要注意缩进注释规范:1.每个css文件头部需要包含3.单行注释和多行注释4.区块注释(可选)Css命名规范：1.css 样式命名统一以下滑线分割如用户信息user_info 和bootstrap的（-）横杆区分开来2.使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名如：/* 不推荐: 无意义*/ #yee-1901 {}/* 不推荐: 与样式相关*/ .button_green {}.clear {}/* 推荐: 特殊性*/ #gallery {}#login {}.video {}/* 推荐: 通用性*/ .aux {}.alt {}3.ID和class命名越简短越好，只要足够表达涵义。

这样既有助于理解，也能提高代码效率。

如：/* 不推荐*/ #navigation {}.atr {}/* 推荐*/ #nav {}.author {}4.类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

经营频道CSS规范前言本规范主要描述：css文件命名规则、css类命名规则、通用的css头和html 布局命名规则。

本规范适用范围：河北新闻网经营频道技术的频道和专题的制作。

本规范适用时间：2012年度书写人：李琳时间：2012-2-15css文件命名为了便于网页的管理，我们建议将页面的css文件统一命名为：style****.css，其中的****为日期编号（如：2月14号出的css文件命名为：style0214.css）。

没有加上年份是因为我认为对于我们现有的频道1年内肯定会进行大规模的改版，没有必要加上年份标记。

此css文件放在到网页模板文件相关文件夹的根目录中便于以后的查找。

html布局命名规则分析现有的频道和专题我们可以看出常用的布局有：头尾中（左右）布局、头尾中（左中右）布局、左右（上中下）布局、上中下布局。

头尾中（左右）布局头尾中（左中右）布局左右（上中下）布局上中下布局我们定义div名称为：头：header尾：footer中：center左中右等级均分（左：area-rank、中：area-main、右：area-sub）中右等级高左等级低（中右：area-main（中左：main-col-l、中右：main-col-r）、左：area-sub）左等级高右等级低（左：area-main、右：area-sub）css类命名规则css类的命名最好是描述性单词或者单词前缀，如果相同命名的可以在后面加上数字编号如（main-col-1，main-col-2）来区分。

如果一个div上需要class 和id分别描述的话，class的命名是以结构布局为主，id的命名是以功能说明为主（如：<div id="sports" class="mod wgt-tab">）。

对于网页中的各类型新闻块在拆分的时候需要单独处理，保证div一个分区中的新闻内容相对统一。

网站制作规范(css篇相关)前言⌝本规范针对网页开发人员编写，在阅读前请先了解一些XHTML、CSS的基本知识，以方便理解编写的内容。

本规范的目的是为了方便大家在开发过程中，通用的、易于维护、高效率的制作WEB界面。

由于本规范编写者个人水平的局限，可能会出现错误与个人习惯差异的地方，敬请个人读者多提宝贵见意来完善本规范的内容。

一命名规则：01. 目录：⌝除非有特殊情况外，目录应使用小写字母(包含数字下划线) 的组合，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；目录命名请尽量以英文⌝为指导，不到万不得已不要以拼音作为目录名称，经验证明用拼音命名的目录往往连一个月后的自己都看不懂；⌝以下为一些常用目录的推荐英文名称：images 放网站不同栏目的页面都要用到的公共图片medias 放flash、avi、quick time 等多媒体文件commons 放js、include 等公共文件styles 放css 样式文件temps 放一些策划与设计中使用的原始资料与备份文件⌝在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。

⌝temps目录中的文件与网上无关，请杜绝非内容的上传。

02. 文件：除非有特殊情况外，文件命名应使用小写字母(包含数字⌝下划线) 的组合，并且以字母开头其中不得包含汉字、空格与特殊字符；文件命名请尽量以英文⌝为指导，不到万不得已不要以拼音作为目录名称；内容不同但属于同类的，且需定期更新的页面文件或文本采用，请使用⌝名称缩写＋(年份)＋月份＋日期＋序号，如：detail_news060101.html⌝以下为一些常用文件命名的格式推荐：首页类文件index(_xxxxxx).后缀名[index_wealth.html]列表类文件list(_xxxxxx).后缀名[list.jsp]内容类文件detail(_xxxxxx).后缀名[detail.jsp]表单类文件post(_xxxxxx).后缀名[post.jsp]表单反馈类文件result(_xxxxxx).后缀名[result.jsp]图片类文件文件类型_xxxxx(图片序号)(背景).后缀名(详见以下)广告图片动画类文件xxxxxx_widthxheight.后缀名(详见以下)03. 图片文件：⌝透明的1x1像素图片名称为：c.gif图片的分类及命名规则：⌝广告类banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf标志类logo logo.gif | logo_newyear2007.gif按钮类button button_01.gif | button_01bg.gif菜单类menu menu_aboutus.gif | menu_job.gif装饰类pic pic_01.gif | pic_02.gif栏目类title title_top01.gif | title_top02bg.gif二设计规范：01. 整体规范：⌝主体框架页面、内容页尽量采用方型结构。

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; } /* 常用功能样式*/.clear { height:0px; font-size:0px; line-height:0px; overflow:hidden; clear:both; } .overflow { overflow:auto; }.nobg { background:none!important; }/* 默认文字链接样式*/a { color:#333; text-decoration:none; }a:hover { color:#285898; text-decoration:underline; }2.2注意事项1.尽量不要采用* { margin:0; padding:0; }2.样式重置代码中已经包含常见情况，后期如有添加请按照CSS书写顺序添加。

最近开始着手网站的改版，因为是团队协作，所有需要注意很多地方，也为了让我们的代码更加规范特收集了一些Web前端开发规范规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名. html书写规范1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;8. 尽可能减少div嵌套, 如<div class="box"& gt;<div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;9. 书写链接地址时, 必须避免重定向，例如：href="/", 即须在URL 地址后面加上“/”；10. 在页面中尽量避免使用style属性,即style="…";11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p> 姓名: <input type="text" id="name" name="name" /></p>须写成:<p&gt;<label for="name">姓名: </label><input type="text" id="name" /></p>12. 能以背景形式呈现的图片, 尽量写入css样式中;13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(&gt;) & 空格( ) & »(») 等等;16. 书写页面过程中, 请考虑向后扩展性;17. class & id 参见 css书写规范.css书写规范1. 编码统一为utf-8;2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i 书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):a, 通过从属写法规避, 示例见d;b, 取父级元素id/class命名部分命名, 示例见d;c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id="mainnav"></div>中加入新的div元素,按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,样式写法: #mainnav .firstnav{.......}按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,样式写法: .main_firstnav{.......}7. css属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left）＆ float & clear ＆ visibility ＆ overflow；自身属性主要包括:width & height & margin & padding & border & background;文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content;我所列出的这些属性只是最常用到的, 并不代表全部;8. 书写代码前, 考虑并提高样式重复使用率;9. 充分利用html自身属性及样式继承原理减少代码量, 比如:<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite 按模块制作;12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , b ase.css文件中我会初始化表格样式)13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" />兼容ie8;14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=crop, src=’img/bg.png’);15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;16. 减少使用影响性能的属性, 比如position:absolute || float ;17. 必须为大区块样式添加注释, 小区块适量注释;18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;JavaScript书写规范1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...);2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;jQuery变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();6. 命名语义化, 尽可能利用英文单词或其缩写;7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;9. 代码结构明了, 加适量注释. 提高函数重用率;10. 注重与html分离, 减小reflow, 注重性能.图片规范1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;2. 图片格式仅限于gif || png || jpg;3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.注释规范1. html注释: 注释格式 <!--这儿是注释-->, '--'只能在注释的始末位置,不可置入注释文字区域;2. css注释: 注释格式 /*这儿是注释*/;3. JavaScript注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;开发及测试工具约定建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:1. 不可利用IDE的视图模式'画'代码;2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;3. 编码必须格式化, 比如缩进;测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug及IE Tab Plus插件.其他规范1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想...。

CSS编写和命名规范在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。

由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。

特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。

第一节CSS样式文件的命名建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：第二节CSS选择符的命名所有选择符必须有小写英文字母或“_”下划线组成；样式名必须是表示该样式的大概含义；参考后面的“样式命名参考”。

当定义的样式名比较复杂时用下划线把层次分开；比如：dcrm_logo{ …} dcrm_logo_ico{…}第三节图片的命名与书写图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。

第四节CSS注释书写规范4.1 提示和标签信息注释这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。

这种应用简洁性最为重要。

注意：注释内容和前面样式语句间有3个空格，后面1个空格4.2 修改样式注释（时间和相关人员）4.3 文档结构注意：相对独立的2段内容之间空1行5.1 建立样式表索引第五节 CSS布局编码标准和建议样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS 注释文本写在 main.css 中。

给出该CSS 文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）5.2 命名锚点的使用命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS 文件获得良好的组织。

命名锚点一般也是书写在样式表头部的索引注释中。

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. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。