终于到了本篇文章的重头戏。简单介绍一下我给自己编写的框架取名 Snack原意“快餐”主要表达简单之意。虽然是轻量级框架但我并不想拿轻量级做为噱头毕竟体量轻意味着某些功能的缺失以及疏漏。这个框架的意义更多的是交流学习我试图借鉴其它框架的优秀之处尽量简化类名以及尝试探索一些更通用的组件。大多数的轻量级框架只是 CSS 框架不涉及 JS 部分主要用于网页的布局。我之所以打算自己编写框架是因为工作中重复的东西太多通过框架可以很好的将这些零散组件整合到一起。另一方面写个小项目学点新知识是一件趣事。编写框架是去年想做的事情但因为时间原因拖了很久。写框架之初我曾陷入一个误区我打算设计一些比较前卫的样式立体的按钮、浮动的面板等比如下图中的风格。https://dribbble.com/shots/524593-Soft-Interface-Black但是在断断续续编写框架的过程中我逐渐找到了方向上图的样式只是一种皮肤编写框架之初不应该把重点放在这上面。当然好的 UI 设计也是框架成功的一部分。模块划分编写框架的第一步就是要确定框架应该包含哪些模块。因为是轻量级框架所以模块肯定没有重量级框架那么全面只有核心的一些组件。通过比较一些轻量级框架以及工作总结大致常用的模块包括栅格、媒体、按钮、排版、表单、表格、面板以及辅助工具。在常用的这几个组件中需要重点关注的是栅格、表单及面板媒体组件也很重要但是自由发挥的空间不大我直接用了 Bootstrap 的媒体组件。命名策略首先是类命名的层次与结构。类命名一直是我比较纠结的地方刚开始工作的时候为了起一个见名知意又简洁的类名总是抓耳挠腮。我在编写框架时尽量避免与 Bootstrap 的类名重叠但也不能完全避免。对比其他框架会发现这种情况不可避免的会出现毕竟类名会有一定的规律性以及层次性。在这一点上我比较喜欢 Bootstrap 的风格。下面和 Bootstrap 的表单做一个对比。Bootstrap 的表单结构及类名--div.form-horizontal --div.form-group --label.control-label --input.form-controlSnack 的表单结构及类名--div.form-row --div.form-item --label.form-label --input.form-field这个表单结构整体而言还算不错只是个别地方需要修改。有一些框架不给input等元素起类名而是给父元素一个类名个人对这种做法表示疑问不起类名会降低框架编写及使用的灵活性。第二个策略是组件的修饰比如按钮及面板都存在多个语境颜色、大小等在这一点上我编写框架时做了一些简化风格上有些 Semantic 的影子。button classbtn primaryprimary/button table classtable bordered striped.../table div classboxes primary.../div关于修饰类的策略是一个仁者见仁智者见智的问题至于哪种方法更好还需要在编写框架的过程中摸索。栅格系统演示示例: https://nzbin.github.io/snack/#grid任何框架必须建立在栅格的基础上才能灵活布局。我在前面提到了 Bootstrap 的精华就是栅格系统。栅格系统的编写需要使用预处理器的循环功能否则就要做无谓的重复劳动了。我遇到过一些轻量级框架是用 Less 编写的其栅格系统就没有用循环这样的源码稍显唐突可能是作者对 Less 的循环功能不熟当然 Less 本身的循环比较弱用起来有些别扭。关于预处理器的循环可以参照我之前翻译的 《CSS 预处理器中的循环》比较详细地对比了三种流行预处理器的循环功能。简单说一下Less 没有循环但可以用递归实现而 Sass 和 Stylus 有真循环。我编写的栅格系统也是默认 12 列但是后来发现 12 列的栅格缺少最常用的列宽比如 10%、20%、30%等比如下面 CodePen 展示的例子用 12 列栅格是无法完成的所以我又添加了 10 列栅格但仍然无法面面俱到不过已经很灵活了。栅格的使用和 Bootstrap 是一样的除了 12 列栅格外10 列栅格以及均分栅格都要添加.cols-类!-- 默认 12 列栅格所以省略 cols-12 -- div classrow div classcol-5/div div classcol-7/div /div !-- 10 列栅格 -- div classrow cols-10 div classcol-3/div div classcol-7/div /div这个栅格并没有响应式只有一个断点小屏手机上的话所有栅格都会单行显示。一方面这样的设计符合大多数轻量级框架的初衷另一方面我打算再写一个针对移动端的框架毕竟 Web 端和移动端的风格差距较大按照业务需求分开会更好。不过最近我更改了源文件为响应式预留了扩展方式。表单演示示例: https://nzbin.github.io/snack/#forms在上面的命名策略中已经展示了 Snack 表单的基本结构基本表单除了结构之外样式上并没有太多可以讨论的地方。在此说一下表单中checkbox的结构调整先看一下 Bootstrap 的checkbox结构。!-- checkbox -- div classcheckbox label input typecheckbox value checkbox /label /div !-- checkbox-inline -- label classcheckbox-inline input typecheckbox idinlineCheckbox1 valueoption1 checkbox /label以上两种结构不能有偏差稍有偏差样式就会错乱灵活性较差。其次我在想两种结构能不能整合在一起增强灵活性。想了很久找到了方法Snack 结构如下!-- checkbox -- div classcheckbox label input typecheckbox value checkbox /label /div !-- checkbox-inline -- div classcheckbox inline label input typecheckbox value checkbox /label /div也可以将样式直接加到label标签上。另外如果将input移到label标签外也是没有问题的如下!-- checkbox -- div classcheckbox input typecheckbox idcheckbox1 value label forcheckbox1checkbox/label /div !-- checkbox-inline -- div classcheckbox inline input typecheckbox idinlineCheckbox1 value label forinlineCheckbox1checkbox/label /div这种结构有一个好处就是可以自定义input样式详见下面的 CodePen 的scss文件。radio的设置和checkBox是一样的。辅助类辅助类是一系列类的组合比如字号大小、颜色值、padding、margin 以及左右浮动等。在一些 Bootstrap 搭建的后台管理系统中尤为常见这样布局起来就会比较灵活。以下是一个边框的辅助类。.border-left-right { border-left: 1px solid #eee; border-right: 1px solid #eee; } .border-top-bottom { border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .border-left { border-left: 1px solid #eee; } .border-right { border-right: 1px solid #eee; } .border-top { border-top: 1px solid #eee; } .border-bottom { border-bottom: 1px solid #eee; }