样式规范校验

CMSS 规则

CMSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector { declaration1; declaration2; … declarationN}每条声明由一个属性和一个值组成。

声明

属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，一条声明以分号结尾。

  1. selector {
  2.     property1: value1;
  3.     property2: value2;
  4. }

selector应为一条独立的id名称或者class名称，不支持级联

  1. // 正确
  2. .selector {
  3.     property1: value1;
  4.     property2: value2;
  5. }
  6. #selector {
  7.     property1: value1;
  8.     property2: value2;
  9. }
  11. // 错误
  12. #selector1 .selector {
  13.     property1: value1;
  14.     property2: value2;
  15. }

多端之间的差异对比

CSS属性H5小程序weex
布局allallflexbox
盒模型allall只支持display:border-box
float浮动✅✅❌
display:inline-block|none✅✅❌
ID选择器✅✅❌
类选择器✅✅✅
属性选择器✅✅❌
级联选择器、派生选择器(后代、子元素、相邻兄弟)✅✅❌
选择器分组✅✅✅
伪类(:active|:focus)✅✅✅
伪类(:hover|:link|:visited|:first-child|:lang)✅✅❌
伪元素(:first-letter|:first-line|:before|:after)✅✅❌
百分比定值✅✅❌
line-height:1✅✅❌
尺寸px|rem|em|vw|vhpx|rpxpx
!important✅✅❌

注意:框架会根据上表所述的多端之间的差异做校验。