前端必须要注意的规范（二）之css规范

前一章主要讲了html的规范和html在webstorm里的一些快捷书写方式，这一章主要讲css的规范和书写顺序

/*   属性书写顺序，提高代码的可读性    *//*   Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果)    *//* Formatting Model:position/top/right/bottom/left/float/display/overflow等  *//* Box Model：border/margin/padding/width/height等  *//* Typographic：font/line-height/text-align/word-wrap等   *//* Visual：background/color/transition/list-style等  *//*   尽量不使用!important声明    *//*   当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!important定义样式，通常在第三方环境的应用中使用这种方案   *//*   将z-index进行分层，对文档流外绝对定位元素的视觉层级关系进行管理    *//*   在可控环境下，期望显示在最上层的元素，z-index指定为999999  *//*   在第三方环境下，期望显示在最上层的元素，通过标签内联和!important,将z-index指定为2147483647   *//*  当数值为0-1之间的小数时，省略整数部分的0  */.pen {    opacity:  .8;}/*  url()函数中的路径不加引号   */body {    background: url(bg.png);}/*  长度为0时须省略单位  */div {    padding: 0 5px;}/*  RGB颜色值必须使用十六进制记号形式#rrggbb.不允许使用rgb()  *//*  带有alpha的颜色信息可以使用rgba(),使用rgba()时每个逗号后必须保留一个空格   *//*  good  */.success {    box-shadow: 0 0 2px rgba(0, 128, 0, .3);    border-color: #008000;}/*  bad  */.success {    box-shadow: 0 0 2px rgba(0,128,0,.3);    border-color: rgb(0, 128, 0);}/*   颜色值不允许使用命名色值     *//* good  */.success {    color: #000;}/* bad  */.success {    color: black;}/*  颜色值中的英文字符采用小写，如不用小写也需要保证统一项目内保持大小写一致   *//*  2D位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为cneter,为避免理解上的困扰，应同时给出两个方向的值   */body {    background-position: center top;}/*  需要在Windows平台显示的中文内容，其字号应不小于12px  *//*  需要在Windows平台显示地中文内容，不要使用除normal外的font-style  *//*  font-weight属性必须使用数值方式描述   *//*  Css的字重分100 - 900共九档，但目前受字体本身质量和浏览器的限制，实际上支持400和700,分别等价于关键词normal和bold   *//*  good  */h1 {    font-weight: 700;}/*  bad   */h1 {    font-weight: bold;}