原子化样式与模板编译

[xinglie]

对于bs架构的服务，任何时候都要关注网络传输，如何快速的把s资源传送到客户端是头等大事，而压缩无疑是较好的一个解决方案

语义化

.btn{
  height:28px;
  padding:4px 8px;
}

.input{
  min-width:200px;
  padding:4px 8px
}

我们可以看到这种写法很容易有相同的样式规则，尤其在现在多人开发的情况下，这种情况是无法避免的。

现在虽然有些压缩器会自动提取相同的样式规则，但也仅限同一个样式文件中，不同样式文件依然会有重复

原子化

如何用最少的字符表达相同的内容？对于样式来讲，原子化无疑是较优解

.height-28px{
     height:28px
}
.padding-4px-8px{
    padding:4px 8px;
}
.min-width-200px{
    min-width:200px;
}

如果我们进行原子化，会带来最少的样式内容(人工保证的)，但在使用的时候会很痛苦，通常会在一个标签上写很多样式规则

自定义标签与编译

虽然现在html为我们提供了如aside、selection等标签，但在实际开发中还是不够用，再一个也有不少的开发人员直接偷懒，用div一把梭

如果我们能够自定义更丰富的标签，在开发时的页面结构也更直观，如

<x.layout.head>
    <x.box.row>
        <x.box.col x-full>site name and logo</x.box.col>
        <x.box.col class="width-200px">user name</x.box.col>
    </x.box.row>
    <x.bow.row>
        <x.box.col x-full>navs</x.box.col>
    </x.box.row>
</x.layout.head>

<x.layout.body>
    
</x.layout.body>
<x.layout.foot>
    <x.copyright />
</x.layout.foot>

通过自定义标签我们可以去定义和丰富自己的结构表达，同时编译工具会把它们转成相应的如div标签然后带上相应的样式

我们以此来解决样式原子化带来的零碎问题