前端的"无样式"开发

[xinglie]

在magix3时期，总结了一些样式的分类与使用，可参考

https://github.com/thx/magix-combine/issues/20 https://github.com/thx/magix-combine/issues/24

以最终在项目中使用的结果来看，分为三类

magix-gallery 全局样式

由组件提供的全局样式，开发者不需要做任何事情，只需要熟知就可以把样式应用在任意view中

scoped.style 项目全局样式

项目级别的全局样式，开发者需要自己编写哪些是项目中可能随处使用的样式，该样式同样可应用在任意view中。当样式与全局冲突时，项目全局样式会覆盖掉全局样式

view.style 为view服务的样式

为部分view服务的样式，在view的javascript代码中需要显式通过applyStyle('@:./view.style')或'ref@:./view.style'引用。开发者需要自己编写样式规则，当样式与项目全局或全局样式冲突时，为view服务的样式会覆盖掉项目全局或全局样式。

抛开统一提供的全局样式来看(该样式不允许开发者自己扩展)，项目中只存在两大类，即项目全局样式和为view服务的样式

存在的问题：前期很难定义哪些是项目级别的全局样式，如果把所有样式都统一放到项目全局样式里，首先文件内容会变得庞大，不便于维护，其次在页面初始化时，会加载很多当前页面用不到的样式。换成每个view都带着为自己服务的样式，避免把样式直接放到项目全局样式里。当view间出现有重复的样式时，开发者通常又懒得把重复的样式再抽取到项目全局样式里，将会有很多重复的样式存在不同的view中，增大代码体积。

如何即方便开发者又能减少项目中重复样式？

或许项目全局样式(原子化)加view动态样式(原子化)生成是一种方案

该方案在项目中最多存在项目全局样式这一个样式文件，view不再有自己的样式文件，而是由编译工具自动生成，从使用上更简洁了。

案例：

初始化一个项目后，不要在项目中新建任何样式文件。

当开发某个view时，需要样式，如果组件提供的全局样式已经存在，则直接使用，这一步与之前的相同，开发者仍然需要熟知组件提供的全局样式都有哪些。

当组件提供的全局样式不够用时，根据 样式原子化规则直接在节点上写类名即可，如

<div class="background-color-red border-radius-x-y-x-y">

</div>

编译工具会自动为不存在的class生成样式，生成的样式仅使用在当前view中

这样依然会有重复的问题，比如多个view都使用了background-color-red，如果把这个background-color-red抽取到项目全局样式里就能解决问题。

目前编译工具还无法做到自动抽取view间重复样式到项目全局样式里，所以这一步需要开发者配合，如果开发者觉得一些样式在view间重复的多，此时才需要建项目全局样式，并在项目全局样式里写上该样式即可，这样编译工具可识别项目全局样式已经存在该样式，就不再为view生成相应的样式了。

自动抽取view间重复样式到项目全局样式里，这块编译工具仍在探索，成功后，未来项目中不需要存在任何样式文件。如果能接受原子化样式，那么项目中将不存在任何重复的样式，同时非全局样式也会附属在js文件上按需加载，不会出现相应的view还没加载，而样式已经存在了的问题。