css编码规范有哪些,css3标准
字体无论有多少人参与同一个项目，都要确保每一行代码看起来都是同一个人写的。
:
黄金定律
1.用两个空格替换制表符——这是在所有环境中保证一致表示的唯一方法。
2.嵌套元素应该缩进一次(即两个空格)。
3.对于属性的定义，请确保使用双引号，而不要使用单引号。
4.不要在自结束元素的末尾添加斜杠HTML5规范明确声明这是可选的。
5.不要省略可选的结束标记。
！DOCTYPE html html head title page title/title/head body img src= images/Company-logo . png alt= Company h1 class= hello-world hello，world！/h1 /body/HTML
语法
在每个HTML页面的第一行添加标准模式的声明，这样可以确保在每个浏览器中呈现的一致性。
！doctype HTML HTML Head/Head/HTML
HTML5 doctype
根据HTML5规范：
强烈建议为html根元素指定lang属性，以便为文档设置正确的语言。这将帮助语音合成工具确定它应该采用的发音，并帮助翻译工具确定它在翻译时应该遵循的规则。
html lang=en-us ！-.-/HTML:
语言属性
IE支持特定的标签来决定绘制当前页面应该采用的IE版本。除非有强烈的特殊需求，最好设置为edge模式，以便通知IE采用其支持的最新模式。
meta http-equiv= X-UA-Compatible content= IE=Edge
IE 兼容模式
通过显式声明字符编码，可以保证浏览器快速方便地判断页面内容的呈现方式。这样做的好处是可以避免在HTML中使用字符实体，这样就和文档编码全部一致了(一般采用UTF-8编码)。
meta charset= UTF-8 /head
字符编码
根据HTML5规范，在引入CSS和JavaScript文件时一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值。
！-外部CSS-link rel= style sheet href= code-guide . CSS ！-文档内CSS样式/*.*//风格！-JavaScript-script src= code-guide . js /script
引入 CSS 和 JavaScript 文件
尽量遵循HTML标准和语义，但不要牺牲实用性。尝试使用最少数量的标签，并始终保持复杂度最低。
实用为王
HTML属性应该按照下面给出的顺序排列，以确保代码的可读性。
班级
身份证，姓名
数据-*
src，for，type，href，value
标题，备选
角色，艾瑞亚-*
类用于标识高度可重用的组件，所以应该排在第一位。Id用于标识特定的组件，应该谨慎使用(例如，页面中的书签)，所以它排在第二位。
属性顺序
可以声明布尔属性，无需赋值。XHTML规范要求给它赋值，但是HTML5规范不要求。
有关更多信息，请参见whatwg关于布尔属性的部分：
如果元素有值，则该元素的布尔属性为true，如果没有值，则为false。
如果必须给它赋值，请参考WhatWG规范：
如果属性存在，其值必须是空字符串或[…]属性的规范名称，并且不要在开头和结尾添加空格。
简单来说就是没有作业。
布尔（boolean）型属性
编写HTML代码时，尽量避免冗余的父元素。很多时候，这需要迭代和重构。请看下面的案例：
！-不太好- span class=avatar img src= ./span！-Better-img class= avatar src= .
减少标签的数量
JavaScript生成的标签使内容难以查找和编辑，并降低了性能。能避免就尽量避免。
:
JavaScript 生成的标签
1.用两个空格替换制表符——这是在所有环境中保证一致表示的唯一方法。
2.将选择器分组时，将单个选择器放在一行上。
3.为了代码的可读性，在每个声明块的左大括号前添加一个空格。
4.声明块的右花括号应该在单独的一行。
5.应该在每个声明语句的：后面插入一个空格。
6.为了获得更准确的错误报告，每个语句都应该有一个专用行。
7.所有声明语句都应以分号结束。最后一个声明语句后面的分号是可选的，但是如果您省略了这个分号，您的代码可能会更容易出错。
8.对于逗号分隔的属性值，应在每个逗号后插入一个空格(例如，阴影框)。
9.不要在rgb()、rgba()、hsl()、hsla()或rect()值中的逗号后插入空格。这有助于区分多个颜色值(只有逗号，没有空格)和多个属性值(包括逗号和空格)。
10.对于属性值或颜色参数，在小于1的小数前面省略0(例如. 5而不是0.5；-0.5px而不是-0.5 px)。
1/十六进制值应该全部小写，例如#fff。扫描文档时，小写字符很容易区分，因为它们的形式更容易区分。
12.尝试使用缩写的十六进制值，例如#fff而不是#ffffff。
13.向选择器中的属性添加双引号，例如，input [type="text"]。仅在某些情况下是可选的，但是为了代码的一致性，建议加上双引号。
14.避免为0值指定单位，例如，使用margin:0；而不是边距：0px。
/*错误的CSS */。选择器，选择器-辅助，选择器[type=text]{ padding:15px；边距：0px 0px 15px背景色：rgba(0，0，0，0.5)；box-shadow:0px 1px 2px #CCC，inset 0 1px 0 #FFFFFF}/* Good CSS */。选择器，选择器-辅助，选择器[type= text ]{ padding:15px；边距-底部：15px背景色：rgba(0，0，0， 5)；box-shadow: 0 1px 2px #ccc，inset 0 1px 0 # fff}
CSS语法
相关的属性声明应组合在一起，并按以下顺序排列：
配置
箱状模式
印刷的
视觉的
首先是定位，因为它可以从正常的文档流中移除元素，还可以覆盖与盒子模型相关的样式。模型排在第二位，因为它决定了组件的大小和位置。
其他属性只影响组件内部或者不影响前两组属性，所以排在后面。声明顺序{ /*定位*/位置：绝对；top:0；右：0；底部：0；左：0；z指数：100；/* Box-模型*/显示：block浮动：对；宽度：100px高度：100px/*排版*/font: normal 13px Helvetica新，无衬线；行高：1.5；颜色：# 333；文本对齐：居中；/* Visual */background-color:# f5f 5 f 5；边框：1px纯色# e5e5e5边框半径：3px/* Misc */不透明度：1；}
声明顺序
与标签相比，@import指令要慢很多，不仅增加了额外请求的数量，还会导致意想不到的问题。有几种选择：
不要使用 @import
通过一个类似Sass或更小的CSS预处理程序将多个CSS文件编译成一个文件。
在Rails、Jekyll或其他系统中已经提供了CSS文件合并功能。
！-使用链接元素-link rel= style sheet href= core . CSS ！-避免@ imports-style @ import URL( more . CSS )；/style
使用多个 元素
将媒体查询放在尽可能接近相关规则的位置。不要把它们打包在一个单独的样式文件中或者文档的底部。如果你把他们分开，他们只会在未来被遗忘。下面给出一个典型的例子。元素{.}.元素-化身{.}.元素-已选择{.}@media(最小宽度：480px) {。元素{.} .元素-化身{.} .元素-已选择{.}}:
媒体查询（Media query）的位置
对于只包含一个语句的样式，为了可读性和快速编辑，建议将语句放在同一行。对于有多个声明的样式，声明仍然应该被分成多行。
其中的关键因素是错误检测——例如，CSS checker指出第183行有语法错误。如果是单个语句，你不会忽略这个错误；如果一行中有多个语句，要仔细分析，避免遗漏任何错误。
/*一行一个声明*/. span 1 { width:60px；}.span2 {宽度：140px}.span3 {宽度：220px}/*多个声明，每行一个*/。sprite { display:inline-block；宽度：16px高度：15px背景-图像：url(./img/sprite . png)；}.图标{背景位置：0 0；}.图标-主页{背景-位置：0-20px；}.icon-account { background-position:0-40px；}
单行规则声明
在需要显式设置所有值的情况下，尽量限制使用缩写属性声明。缩写属性声明的常见滥用情况如下：
填料
边缘
字体
背景
边界
边框半径
在大多数情况下，我们不需要为简短形式的属性声明指定所有的值。比如HTML的heading元素只需要设置上下边距的值，所以只需要在必要的时候覆盖这两个值就可以了。使用过于缩写的属性声明会导致代码混乱和不必要的属性值覆盖，从而产生意想不到的副作用。
/*坏例子*/。元素{ margin:0 0 10px；背景：红色；背景：URL( image . jpg )；border-radius:3px 3px 0 0；}/*好例子*/。element { margin-bottom:10px；背景色：红色；背景-图像：URL( image . jpg )；border-top-left-radius:3px；border-top-right-radius:3px；}
简写形式的属性声明
避免不必要的嵌套。这是因为虽然你可以使用嵌套，但并不意味着你应该使用嵌套。只有当样式必须限于父元素(即后代选择器)并且有多个元素需要嵌套时，才使用嵌套。
//没有嵌套。表一和表二。表格thead tr TD {…}//带有嵌套。表thead tr {th {…} td {…}}:
Less 和 Sass 中的嵌套
为了提高可读性，在括号中的数学表达式的值、变量和运算符之间添加了一个空格。
//错误的example . element { margin:10px 0 @ variable * 2 10px；}//好例子. element { margin:10px 0(@ variable * 2)10px；}
Less 和 Sass 中的操作符
代码是人写的，人维护的。确保你的代码是自描述的，注释良好的，并且易于他人理解。好的代码注释可以传达上下文和代码目的。不要简单地重复组件或类名。
对于长笔记，一定要写完整的句子；对于一般性的评论，可以写简洁的短语。
/*错误的示例*//*模式头*/。模态标题{.}/*很好的例子*//*包装元素。模态-标题和。模态-关闭*/。模态标题{.} :
注释
1.类名中只能出现小写字符和连字符(不能是下划线或驼峰命名法)。破折号应该用来命名相关类(类似于名称空间)(例如。btn和。BTN-危险)。
2.避免过于随意的缩写。btn代表按钮，但是。s不能表达什么。
3 .类名应尽可能简短，含义明确。
4.使用有意义的名称。使用有组织的或有目的的名字，而不是表象的名字。
5.基于最近的父类或基类)作为新类的前缀。
6.使用。js-*类来标识行为(与样式相对)，并且不要在CSS文件中包含这些类。
/* badexample */。t {.}.红色{.}.标题{.}/*好例子*/。推特{.}.重要信息{.}.tweet-header {.}:
class 命名
对通用元素使用类，这对渲染性能有好处。
避免对经常出现的组件使用属性选择器(例如，[class="…"])。浏览器的性能会受到这些因素的影响。
选择器应该尽可能的短，组成选择器的元素数量应该尽可能的少。建议不要超过3。
仅在必要时(例如，当不使用带前缀的类时——前缀类似于名称空间)，将类限制到最近的父元素(即后代选择器)。
/*坏例子*/span {.}.页面-容器#流。流项目。发微博。推文-标题。用户名{.}.头像{.}/*好例子*/。头像{.}.tweet-header.username {.}.tweet.avatar {.}:
选择器
根据以下配置设置编辑器，以避免常见的代码不一致和差异：
使用两个空格代替制表符(软制表符意味着空格代表制表符)。保存文件时，删除末尾的空格。将文件编码设置为UTF-8。在文件末尾添加一个空行。请参考文档，并将配置信息添加到。项目的editorconfig文件。示例：引导中的editorconfig实例。请参考关于编辑器配置了解更多信息。
为了更好更舒适的阅读，请查看本文https:///shouce/codeguide/。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。