选择器命名约定1.模块化命名例如：布局相关的样式以“g”开头。如“g-content”和“g-header”；与钩子相关的样式以“j”开头。如“j-open”和“j-request”；与元素相关的样式以“m”开头。如“m-dropMenu”和“m-slider”；状态相关的样式以“s”开头。如“s-current”和“s-selected”；与工具相关的样式以“u”开头。如“u-clearfix”和“u-ellipsis”。“工具”是指与业务逻辑解耦的可重用样式；“组件”是指自定义的可重用和可移植的基本网页元素；“钩子”是指一种可以被JavaScript操纵的样式。上面的描述只是一个例子。您可以根据项目需求自定义首字母。这样做的目的是让CSS代码干净，易于维护。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。有需要的可以加群一起学习交流。2.选择器全部小写推荐写法：.g-first-header{line-height:16px;}不推荐的写法：.g-FirstHeader{line-height:16px;}3.每个选择器除了最后一个选择器占据一列外，其他每个列选择器以逗号结尾。如果使用兄弟元素选择器，则在相关符号的左右两端各留半角空格。推荐写法：.g-first-header,.g-second-header-1>.g-second-header-2{border:2pxsolid#C3C3C3;}不推荐写法：.g-first-header,.g-second-header-1>.g-second-header-2{border:2pxsolid#C3C3C3;}4。避免HTML标签在构建选择器时，尽量使用语义清晰的类名，避免HTML标签，因为一旦HTML的结构发生变化，相应的样式就会失效。尽量把样式和结构分开，这样层次化的样式表以后更容易维护。推荐写法：.g-content.g-item{flex-basis:20%;}不推荐的写法：.g-contentli{flex-basis:20%;}5.IDID的唯一性注定了它对应的元素的样式是一次性的，不能重复使用。一旦HTML结构发生变化，应用ID的选择器也必须进行相应的修改。还有一个重要的原因是：ID的权重值最高，可能会导致以后添加的样式无法复制原来的样式。推荐写法：.g-special-content{height:100px;宽度：300px；}不推荐写法：special-content{height:100px;宽度：300px；}属性书写规范1.排列各个属性规则下的属性在书写时要按类别分组，排列顺序如下：position:bottom,float,display,left,position,right,top,andz-索引等；size：height、margin、padding、width等；Layout：color、font、letter-spacing、line-height、text-align等；背景：背景等；其他：animation和transition等。2.缩写属性有些属性可以组合在一起，这样不仅简化了代码，也方便了阅读。推荐写法：.test-selector-1{padding:3px5px;}不推荐写法：.test-selector-1{padding-top:3px;填充右：5px；填充底部：3px；左填充：5px；}3。去掉小数点开头的0。推荐写法：.test-selector-2{font-size:.5em;}不推荐写法：.test-selector-2{font-size:0.5em;}4.缩写十六进制值推荐写法：.test-selector-3{background-color:#0b0;}不推荐写法：.test-selector-3{background-color:#00bb00;}5.合理使用引号对于“font-family”属性，我们通常用引号将带空格的字体名称括起来，但是对于不具备这些特性的一般字体，有无引号不影响显示页面的效果。为了保证视觉上的统一和最大程度地兼容各种浏览器，建议您在所有字体名称的两端都加上引号。推荐写法：.test-selector-4{font-family:"MicrosoftYaHei","MicrosoftZhenghei","\5b8b\4f53";}不推荐写法：.test-selector-4{font-family:"MicrosoftYaHei",MicrosoftZhenghei,\5b8b\4f53;}个别属性的值包含字符串"url()"，开发者需要传入一个资源路径给它。请注意，在早期版本的InternetExplorer中，路径中的空格可能无法识别，导致找不到资源。为了保险起见，无论路径是否包含空格，最好在你传入的路径两端加上引号。推荐写法：.test-selector-5{background-image:url(“../Images/BacPic.png”);}不推荐写法：.test-selector-5{background-image:url(../Images/BackPic.png);}6.避免！important"!important"会给以后的维护带来麻烦，开发者很难发现样式问题。如果在写入的过程中发现了新的风格，旧的风格是无法被覆盖的。通常有两个原因：要么新样式写在旧样式前面，要么新样式对应的选择器权重比旧样式低。对于后一种情况，在不使用“!important”的情况下，简单地增加新样式选择器的权重值就可以完全避免这个问题。推荐写法：.test-selector-6.test-selector-7{font-size:16px;}.test-selector-6.test-selector-7.test-selector-8{字体大小：14px；}不推荐写法：.test-selector-6.test-selector-7{font-size:16px;}.test-selector-8{font-size:14px!important;}7.规范注释为单栏注释，星号与内容之间留半角空格。推荐写法：/*这是第一篇评论文字。*///这是第二个评论文本。复制代码不推荐：/*这里是注释文本。*///这是第二个评论文本。复制代码在多列注释中，多个星号应放在一行中。还要在星号和内容之间留一个半角空格。推荐写法：/***这里是注释文字。*这是第二个评论文本。*/不推荐：/***这里是注释文字。*这是第二个评论文本。*/在文档注释中，除了在多栏注释中书写外，还使用标识符来描述文档的某一部分。标识符后冒号右侧与描述文本之间留半角空格。推荐写法：/***@name：文件名；*@description:描述文字；*@author:张三,李斯;*@update:December19,2018.*/不推荐写法：/***@name:文件名；*@description:描述文字；*@author:张三,李斯;*@update：2018年12月19日。*/8。将标准属性放在底部。某些属性在某些浏览器中尚未完全标准化。每个浏览器开发人员可能不会统一实现这些属性。所以需要在开头加上浏览器厂商专有。细绳。所以同一个属性需要写多次，但是有一点要注意：把没有前置标记的属性放在最下面。推荐写法：.test-selector-9{opacity:0;-webkit-transition:opacity3s;-moz-transition:不透明度3s;-ms-transition:不透明度3s;-o-transition:不透明度3s;过渡：不透明度3s；}不推荐：.test-selector-9{opacity:0;-webkit-transition:opacity3s;过渡：不透明度3s；-moz-transition:不透明度3s;-ms-transition:不透明度3s;-o-transition:不透明度3s;}9.注意标点符号，每个属性都独占一列。紧跟在样式属性之后的冒号必须跟一个半角空格。值以分号结尾。推荐写法：.test-selector-10{opacity:.5;}不推荐的写法：.test-selector-10{opacity:.5}10.样式块之间留空行。内容周围留空行，避免内容过于拥挤阻碍搜索。推荐写法：.test-selector-11{opacity:0.5;}.test-selector-12{字体大小：16px；}.test-selector-13{溢出：隐藏；}不推荐写法：.test-selector-11{opacity:0.5;}.test-selector-12{字体大小：16px；}.test-selector-13{溢出：隐藏；}11.将太长的内容折叠成几列相同属性的值如果有多个值或者值太长，用逗号分隔这些值，每个逗号后加一个空格，一个值太长的可以开始一个新的专栏。推荐写法：.test-selector-14{linear-gradient(135deg,deeppink25%,transparent25%)-50px0,linear-gradient(225deg,deeppink25%,transparent25%)-50px0,linear-gradient(315deg,deeppink25%,transparent25%),linear-gradient(45deg,deeppink25%,transparent25%);}不推荐：.test-selector-14{linear-gradient(135deg,deeppink25%,transparent25%)-50px0,linear-gradient(225deg,deeppink25%,transparent25%)-50px0,linear-gradient(315deg,deeppink25%,transparent25%),linear-gradient(45deg,deeppink25%,transparent25%);}12。避免CSSHack所谓“CSSHack”就是在样式表中加入几个特殊的符号，让能够识别不同符号的浏览器在同一个元素上计算出不同的样式。CSSHack的起因是老式浏览器（如饱受诟病的InternetExplorer6）对同一套样式表的计算结果与其他浏览器不同，容易造成布局混乱。所以以前我们通常要针对个别奇葩的浏览器写有针对性的CSS。例如，宽度：300px；_宽度：200px；对于其他浏览器，选择器的宽度值应该是300像素，但是IE6可以识别底线，所以它计算出来的宽度是200像素。13.减少影响性能的属性的使用。不要在样式表中包含过多的过滤表达式和重复关键字。这些属性会降低网页的渲染性能。如果要重复背景图，原图的宽高不能小于8px。
