样式与CSS

组件样式

只作用到当前组件的样式。

静态样式

已默认写好当前的id作为选择器,优先级比较高。

动态样式

数据组件的子组件可以用表达式来动态改变运行时样式,是直接作用到元素的行内(inline)样式,优先级非常高。
它是JSON格式的,为了符合JSON语法,表达式除了要用小括号括起来外还得再用引号包裹。选择器要改用驼峰写法,比如fontSize,backgroundColor。

页面CSS

作用到当前页面选择器所能选到的所有元素上,存储在页面根节点上或共享组件根节点上,所以在根节点上会显示所有它存放的CSS。当选中一个组件时只显示能作用到它的CSS。
点击选择器时面板下方会显示匹配到的组件列表,点击可跳到对应组件。
如果未匹配到组件则会显示 “清除没用到的CSS” 按钮,点击后会扫瞄当前已渲染的页面节点,把无法选到任何节点CSS移到下面框了。请认真确认它们确实无用,因为如果当前页面未渲染的组件(渲染条件此时为false)所用到的CSS被认为是 ”没用到的CSS“ 。如果有问题Ctrl-Z撤回,或者手动从下面框中把误删CSS移回上面框。
每个页面都有自己唯一的类名,它就是当前页面名称加上zz前缀。

全局CSS

在应用中心里有共用CSS,移动端CSS,桌面端CSS三组全局CSS,在应用初始化的时候就加载进来了,能作用到所有页面。全局CSS是存放在对象存储服务器里的静态CSS文件,每次更改都会上传并创建新版本,加载速度快,不计算流量。局部样式是保存到数据库的,适合频繁修改,加载速度慢些,会计算流量。

最佳实践

组件样式 => 页面CSS => 全局CSS

在开发初期写在局部样式/CSS里,开发完成后把浏览量大的页面CSS外置到全局CSS,酌情利用zz开头的页面唯一类名来修饰选择器以免影响到其他页面。
数组类型的数据组件子组件也应避免写组件样式,因为它们会根据数组长度被循环创建,行内样式被重复复制。

同步外部修改

在非根节点组件选中状态下,在浏览器开发者工具样式面板里修改了样式后再次聚焦(focus)回到属性编辑面板框,会自动把修改同步进来。如果希望保留此外部修改你可以在编辑框内做任意改动(比如在无关紧要的的地方打个空格)就可以保存此次修改,如果想放弃外部修改忽略它即可(离开编辑框)。

Make in ZC APP Platform