下载文档原格式
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命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。
关于CSS的命名我们采用骆驼式命名法。
骆驼式命名法：正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。
例如：mianNav footNav1.通用命名规则：1)所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_22)所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav3)页面主体框架布局命名：Lay_1、Lay_2 、Lay_34)栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N5)栏目标题块命名一律采用title。
元素标签采用:<h4> 如：<div class="tit"><h4>标题</h4></div>6)页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N7)页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N8)页面上按钮采用：btn_1、btn_2、btn_3、btn_N9)广告区域：ad_1,ad_2,ad_3,ad_N2.主框架命名规则：1)#header (页面头部)2)#main (页面主体)3)#footer (页面尾部)3.通用命名规则：主体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink 版权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb 容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多fl /fr float:left/float:righttit 标题栏spr 空行t / d / mid / l / r：上 / 下 / 中 / 左 / 右bdr：边w：宽h：高1.频道私有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（层叠样式表）技术一直是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的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTM l和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。
为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用h eader，头部左边，可以用hea der_l eft或h eader_l,还有如果是列结构的可以这样——box _1of3(三列中的第一列)，box_2o f3 (三列中的第二列)、box _3of3(三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。
）容器：contai ner/box头部：header主导航：m ainNa v子导航：subNav顶导航：topNav网站标志：logo大广告：banner页面中部：m ainBo dy底部：footer菜单：menu菜单内容：m enuCo ntent子菜单：subMen u子菜单内容：subMen uCont ent搜索：search搜索关键字：keywor d搜索范围：range标签文字：tagTit le标签内容：tagCon tent当前标签：tagCur rent/curren tTag标题：title内容：conten t列表：list当前位置：curren tPath侧边栏：sideba r图标：icon注释：note登录：login注册：regist er列定义：column_1of3(三列中的第一列)column_2of3(三列中的第二列)column_3of3(三列中的第三列)二、id和cla ss的使用及区别我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>id一个页面只可以使用一次，class可以多次引用。
css命名规范以CSS命名规范为标题，本文将介绍CSS命名规范的主要规则及其实践方法。
1.解CSS命名规范CSS命名规范旨在使CSS的命名结构可读性更强，可维护性更高，从而使CSS编码更轻松、高效。
当有一个明确的命名规范时，CSS代码也会更有组织，可以让他人更轻松地读懂，时也能够更轻松地调试、扩展现有的CSS代码。
CSS命名规范的精髓在于采用“短且易懂”的命名规则。
其含义通常能从简单的词汇中理解出来，在CSS中可以用更短的名称表示，以减少开发人员在编写样式时所需要记忆的命名空间。
2. CSS命名规范的主要规则CSS的命名规范规定，在生成类名时必须要遵循以下几个原则：（1）层级性：CSS的类名必须有层级性，可以根据文档的内容结构设计CSS的类名，以增强代码的可读性。
（2）效率：CSS的类名应该有一定的简写规则，避免重复，使开发人员可以更加轻松地记忆、使用。
（3）可读性：CSS的类名应该有简洁清晰的表意，使开发人员可以轻松地更改或定位某个HTML元素的CSS样式。
（4）标识：CSS的类名应该有一些“标识符”，使得命名更加明确，便于维护。
3.践CSS命名规范（1）使用层级性命名：CSS的类名要根据文档的内容结构设计，以便更有层次，让代码变得更具可读性，更容易维护。
如：.header-nav {list-style: none;padding: 0;margin: 0;}.header-nav li {float: left;margin-right: 10px;}.header-nav a {padding: 10px;color: #FFF;}（2）使用简写规则：在CSS类名中，应该避免过长的词汇，可以使用简写来代替，例如，使用“cont”表示“content”，使用“nav”表示“navigation”等，以减少开发人员在编写样式时所需要记忆的命名空间。
（3）使用可读性的类名：CSS的类名必须有简洁清晰的表意，以便开发人员可以轻松地更改或定位某个HTML元素的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书写顺序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书写规范使用CSS缩写属性CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！16进制颜色代码缩写有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢？∙输入的时候少按一个shift键；∙浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）不要随意使用idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.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指南：guide服务：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服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright注意事项::1.一律小写;2.尽量用英文;3.不加中槓和下划线;4.尽量不缩写，除非一看就明白的单词。
css编码规范、空格占位符记录⼏个我平时不太注意的地⽅： 1.选择器与{ 之间包含空格；eg：.selector {} 2.属性名与之后的：之间不允许包含空格，：与属性值之间必须包含空格；eg:margin: 0; 3.列表型属性值书写在单⾏是，，后必须跟⼀个空格;eg: font-family:Arial, sans-serif; 4.当⼀个rule包含多个selector时，每个选择器声明必须独占⼀⾏；eg： .post, .page, .comment { line-height:1.5; } 5.选择器“>”“+”“~”的两边各保留⼀个空格 main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; } 6.属性书写顺序 布局⽅式、位置 > 尺⼨ > ⽂本相关 > 视觉效果 布局⽅式、位置相关：position/top/right/float/display/overflow等 尺⼨相关：border/margin/padding/width/height等 ⽂本相关：font/line-height/text-align/word-wrap等 视觉效果：background/color/transition/list-style等 注意：如果包含content属性，应放在最前⾯。
eg:.sidebar {/* formatting model: positioning schemes / offsets / z-indexes / display / ... */position: absolute;top: 50px;left: 0;overflow-x: hidden;/* box model: sizes / margins / paddings / borders / ... */width: 200px;padding: 5px;border: 1px solid #ddd;/* typographic: font / aligns / text styles / ... */font-size: 14px;line-height: 20px;/* visual: colors / shadows / gradients / ... */background: #f5f5f5;color: #333;-webkit-transition: color 1s;-moz-transition: color 1s;transition: color 1s;} 7.2D位置，必须同时给出⽔平和垂直⽅向的位置，2D位置初始值为0% 0%，但在只有⼀个⽅向的值时，另⼀个⽅向的值会被解析为center,为避免理解上的错误，同时给出两个⽅向的值较好；eg: body { background-position: center top; /* 50% 0% */ } 8.字体名称⼀律⽤英⽂，放在引号中，常见字体如下：字体操作系统Family Name宋体 (中易宋体)Windows SimSun⿊体 (中易⿊体)Windows SimHei微软雅⿊Windows Microsoft YaHei微软正⿊Windows Microsoft JhengHei新宋体Windows NSimSun仿宋Windows FangSong楷体Windows KaiTi仿宋_GB2312Windows FangSong_GB2312楷体_GB2312Windows KaiTi_GB2312新细明体Windows PMingLiU细明体Windows MingLiU华⽂⿊体Mac/iOS STHeiti冬青⿊体Mac/iOS Hiragino Sans GB苹果俪中⿊Mac/iOS Apple LiGothic Medium苹果俪细宋Mac/iOS Apple LiSung Light⽂泉驿正⿊Linux WenQuanYi Zen Hei⽂泉驿微⽶⿊Linux WenQuanYi Micro Hei⾪书Windows LiSu幼圆Windows YouYuan华⽂细⿊Windows STXihei华⽂楷体Windows STKaiti华⽂宋体Windows STSong华⽂中宋Windows STZhongsong华⽂仿宋Windows STFangsong⽅正舒体Windows FZShuTi⽅正姚体Windows FZYaoti华⽂彩云Windows STCaiyun华⽂琥珀Windows STHupo华⽂⾪书Windows STLiti华⽂⾏楷Windows STXingkai华⽂新魏Windows STXinwei font-family的最后指定⼀个字体族（serif/sans-serif）,eg： .article {font-family: Arial, sans-serif;}/* Specific for most platforms */h1 {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;} 9.字号：需要在windows平台显⽰的中⽂内容分类，字号不⼩于12px;(由于 Windows 的字体渲染机制，⼩于 12px 的⽂字显⽰效果极差、难以辨认) 10.字体风格：需要在 Windows 平台显⽰的中⽂内容，不要使⽤除normal外的font-style。
良好的命名规范可以为团队合作开发推波助澜，无论在项目开发，还是产品维护上都起到了至关重要的作用。
应该说命名规范是一种约定，也是程序员之间良好沟通的桥梁。
另外古人相信只要知道一个人真正的名字就会获得凌驾于那个人之上的不可思议的力量。
只要给事物想到正确的名字，它就可以带来比代码更强的力量。
如果所有的命名都与其自然相适合，则关系清晰，含义可以推导得出，一般人的推想也能在意料之中。
CSS+DIV的命名规则：登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight1.CSSID的命名外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示)容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的current2.样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css说明：均为class，需要扩展，则在当前命名内以“_“(下划线)后缀自定名称。
CSS规范语法∙使用四个空格的soft tabs —这是保证代码在各种环境下显示一致的唯一方式。
∙使用组合选择器时，保持每个独立的选择器占用一行。
∙为了代码的易读性，在每个声明的左括号前增加一个空格。
∙声明块的右括号应该另起一行。
∙每条声明:后应该插入一个空格。
∙每条声明应该只占用一行来保证错误报告更加准确。
∙所有声明应该以分号结尾。
虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错。
∙逗号分隔的取值，都应该在逗号之后增加一个空格。
比如说box-shadow∙不要在颜色值rgb()rgba()hsl()hsla()和rect()中增加空格，并且不要带有取值前面不必要的0 (比如，使用 .5 替代0.5)。
This helps differentiate multiple color values (comma, no space) from multiple propertyvalues (comma with space).∙所有的十六进制值都应该使用小写字母，例如#fff。
因为小写字母有更多样的外形，在浏览文档时，他们能够更轻松的被区分开来。
∙尽可能使用短的十六进制数值，例如使用#fff替代#ffffff。
∙为选择器中的属性取值添加引号，例如input[type="text"]。
他们只在某些情况下可有可无，所以都使用引号可以增加一致性。
∙不要为0 指明单位，比如使用margin: 0;而不是margin: 0px;。
对这里提到的规则有问题吗？参考Wikipedia 中的 CSS 语法部分。
/* Bad CSS */.selector,.selector-secondary,.selector[type=text] { padding:15px;margin:0px0px15px;background-color: rgba(0,0,0,0.5);box-shadow:01px2px#CCC,inset01px0#FFFFFF}/* Good CSS */.selector,.selector-secondary,.selector[type="text"] {padding:15px;margin-bottom:15px;background-color: rgba(0,0,0,.5);box-shadow:01px2px#ccc,inset01px0#fff;}声明顺序相关的属性声明应该以下面的顺序分组处理：1.Positioning2.Box model 盒模型3.Typographic 排版4.Visual 外观Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。
盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
关于完整的属性以及他们的顺序，请参考Recess。
.declaration-order {/* Positioning */position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;/* Box-model */display:block;float:right;width:100px;height:100px;/* Typography */font:normal13px"Helvetica Neue",sans-serif;line-height:1.5;color:#333;text-align:center;/* Visual */background-color:#f5f5f5;border:1px solid#e5e5e5;border-radius:3px;/* Misc */opacity:1;}不要使用@import与<link>标签相比, @import更慢, 增加了额外的页面请求，可能还会导致不可预见的问题。
避免使用它们，改用以下的方法:∙多用几个<link>标签∙将你的css编译到一个文件里∙用Rails, Jekyll,以及其他环境提供的特性来间接这些css<!-- Use link elements --><link rel="stylesheet"href="core.css"><!-- Avoid @imports --><style>@import url("more.css");</style>媒体查询位置尽量将媒体查询的位置靠近他们相关的规则。
不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。
这样做只会让大家以后更容易忘记他们。
这里是一个典型的案例。
.element { ... }.element-avatar { ... }.element-selected { ... }@media(min-width:480px) {.element { ...}.element-avatar { ... }.element-selected { ... }}前缀属性当使用厂商前缀属性时，通过缩进使取值垂直对齐以便多行编辑。
在Textmate 中，使用Text →Edit Each Line in Selection (⌃⌘A)。
在Sublime Text 2 中，使用Selection →Add Previous Line (⌃⇧↑) 和Selection →Add Next Line (⌃⇧↓)。
/* Prefixed properties */.selector {-webkit-box-shadow:01px2px rgba(0,0,0,.15);box-shadow:01px2px rgba(0,0,0,.15);}单条声明的声明块在一个声明块中只包含一条声明的情况下，为了易读性和快速编辑可以考虑移除其中的换行。
所有包含多条声明的声明块应该分为多行。
这样做的关键因素是错误检测- 例如，一个CSS 验证程序显示你在183 行有一个语法错误,如果是一个单条声明的行，那就是他了。
在多个声明的情况下，你必须为哪里出错了费下脑子。
/* Single declarations on one line */.span1 { width:60px; }.span2 { width:140px; }.span3 { width:220px; }/* Multiple declarations, one per line */.sprite {display:inline-block;width:16px;height:15px;background-image:url(../img/sprite.png);}.icon { background-position:00; }.icon-home { background-position:0-20px; }.icon-account { background-position:0-40px; }属性简写坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。
常见的属性简写滥用包括:∙padding∙margin∙font∙background∙border∙border-radius大多数情况下，我们并不需要设置属性简写中包含的所有值。
例如，HTML 头部只设置上下的margin，所以如果需要，只设置这两个值。
过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。
/* Bad example */.element {margin:0010px;background:red;background:url("image.jpg");border-radius:3px3px00;}/* Good example */.element {margin-bottom:10px;background-color:red;background-image:url("image.jpg");border-top-left-radius:3px;border-top-right-radius:3px;}LESS 和 SASS 中的嵌套避免不必要的嵌套。
可以进行嵌套，不意味着你应该这样做。
只有在需要给父元素增加样式并且同时存在多个子元素时才需要考虑嵌套。
// Without nesting.table>thead>tr>th { … }.table>thead>tr>td { … }// With nesting.table>thead>tr {>th { … }>td { … }}代码注释代码是由人来编写和维护的。
保证你的代码是描述性的，包含好的注释，并且容易被他人理解。
好的代码注释传达上下文和目标。
不要简单地重申组件或者class 名称。
Be sure to write in complete sentences or larger comments and succinct phrases for general notes./* Bad example *//* Modal header */.modal-header {...}/* Good example *//* Wrapping element for .modal-title and .modal-close */ .modal-header {...}Class 命名∙保持Class 命名为全小写，可以使用短划线（不要使用下划线和camelCase 命名）。
短划线应该作为相关类的自然间断。
(例如，.btn和.btn-danger)。
∙避免过度使用简写。
.btn可以很好地描述button，但是.s不能代表任何元素。
∙Class 的命名应该尽量短，也要尽量明确。
∙使用有意义的名称；使用结构化或者作用目标相关，而不是抽象的名称。
∙命名时使用最近的父节点或者父class 作为前缀。
∙使用.js-* classes 来表示行为(相对于样式)，但是不要在CSS 中包含这些classes。
/* Bad example */.t { ... }.red { ... }.header { ... }/* Good example */.tweet { ... }.important { ... }.tweet-header { ... }选择器∙使用classes 而不是通用元素标签来优化渲染性能。
