江苏龙网

  1. 主页 > 生活百科 > >

如何编写轻量级 CSS 框架( 三 )

框架css


大多数的轻量级框架只是 CSS 框架，不涉及 JS 部分，主要用于网页的布局 。我之所以打算自己编写框架，是因为工作中重复的东西太多，通过框架可以很好的将这些零散组件整合到一起 。另一方面，写个小项目，学点新知识是一件趣事 。
编写框架是去年想做的事情，但因为时间原因，拖了很久 。写框架之初我曾陷入一个误区，我打算设计一些比较前卫的样式，立体的按钮、浮动的面板等，比如下图中的风格 。

如何编写轻量级 CSS 框架

文章插图
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-control
Snack 的表单结构及类名
 --div.form-row --div.form-item --label.form-label --input.form-field
这个表单结构整体而言还算不错，只是个别地方需要修改 。有一些框架不给input等元素起类名，而是给父元素一个类名，个人对这种做法表示疑问，不起类名会降低框架编写及使用的灵活性 。
第二个策略是组件的修饰，比如按钮及面板都存在多个语境（颜色、大小等），在这一点上我编写框架时做了一些简化，风格上有些 Semantic 的影子 。
 <button class="btn primary">primary</button><table class="table bordered striped">...</table><div class="boxes 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 class="row"> <div class="col-5"></div> <div class="col-7"></div></div>
<!-- 10 列栅格 --><div class="row cols-10"> <div class="col-3"></div> <div class="col-7"></div></div>


推荐阅读


上一篇：加湿器需要放在高处吗 加湿器不能放在什么地方

下一篇：电磁炉加热为什么一阵一阵的 电磁炉为什么一阵一阵的烧