江苏龙网

  1. 主页 > 生活百科 > >

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

框架css


下面我们通过对比几个框架的栅格和按钮来看一下类命名的策略 。
Bootstrap
 <div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div></div><button class="btn btn-primary" type="submit">Button</button>
Semantic
 <div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div></div>
<button class="ui primary basic button">Primary</button>
Foundation
 <div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div></div>
<button type="button" class="primary button">Primary</button>
UIkit
 <div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div></div>
<button class="uk-button uk-button-primary" type="button">Primary</button>
Pure
 <div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div></div>
<button class="pure-button pure-button-primary">A Primary Button</button>
通过上面的对比，大家应该已经发现了这些框架的命名策略的不同 。不可否认，Bootstrap 的命名最经典 。
之前在网上看到有人讨论关于框架的易用性，有人说 Bootstrap 的类名太长，然而通过上面几个框架的对比，Bootstrap 的类并不繁琐，而且用预处理器编写框架时嵌套会比较灵活 。
Semantic 的类名最简洁，通过多个定语的修饰组成一句话，确实很有意思 。但是过多的修饰类在编写框架时会稍显凌乱，有利有弊，因人而异吧 。
Foundation 的栅格应该是最丰富的，策略上类似 Bootstrap，只是对公共属性进行了拆分，大家也可以看看其中的具体细节 。
UIkit 和 Pure 的策略相同，都加了前缀以区分其它框架，但是很显然类名过于冗长了 。我在编写框架时也这样想过，但是最终放弃了这种方式 。
 
关于 CSS 预处理器CSS 预处理器早已不是什么新鲜事，但是真正能够在工作中运用的人有多少呢？熟练使用预处理器特性的人又有多少呢？
我之前工作的时候也没有用预处理器，因为不用，所以也意识不到预处理器的好处 。主要是觉得麻烦，因为要使用编译器编译一下，还不如直接写 CSS 方便 。但是在项目维护的时候就意识到预处理器的好处 。
后来在几个项目中尝试了预处理器，但是对于模块化的写法不太明确 。预处理器作为工具，可以实现模块化编写 CSS，那么应该如何划分模块？另外，预处理器有很多特性，但是大多数人刚开始只用到变量和嵌套，其它的特性几乎很少用到 。我相信在自己动手实现一个轻量级框架的过程中，我们可以对预处理器有一个全面的了解 。
目前流行的预处理器有 Less，Sass，Stylus 三个，选择哪个完全是看自己的习惯 。我最开始因为 Bootstrap 了解的 Less，但是因为习惯选择了 Sass，其次 Sass 的功能要更全面一些 。
无论是工作还是自己写项目，都要搭建一个项目环境，也就是安装一系列的 npm 包 。相比刀耕火种的开发方式，使用工具开发的前期准备过程稍显麻烦，然而一旦环境建好，后期的开发将会游刃有余 。
Miligram 这个轻量级框架在 Github 上有很高人气，但是说实话，用处并不大 。不过这个框架的构建方式非常值得学习 。虽然 CSS 对于很多人来说很简单，但是真要去写一个框架，还是非常棘手，这时候就需要借鉴一些优秀的框架 。
编写框架大致会用到的 npm 如下：
 --autoprefixer--node-sass--npm-run-all--rimraf--onchange
其实最主要的就是一个 node-sass，其它的都是辅助 CSS 文件的生成修改，大家感兴趣的话可以去 npm 官网搜索这些插件，了解具体用法，如有不懂可以给我留言，我就不啰嗦了 。
 
编写轻量级框架终于到了本篇文章的重头戏 。
简单介绍一下，我给自己编写的框架取名 Snack，原意“快餐”，主要表达简单之意 。虽然是轻量级框架，但我并不想拿轻量级做为噱头，毕竟体量轻意味着某些功能的缺失以及疏漏 。这个框架的意义更多的是交流学习，我试图借鉴其它框架的优秀之处，尽量简化类名，以及尝试探索一些更通用的组件 。


推荐阅读


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

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