江苏龙网

  1. 主页 > 生活百科 > >

如何编写轻量级 CSS 框架

框架css


如何编写轻量级 CSS 框架

文章插图
作者 | 叙帝利
链接 | www.cnblogs.com/nzbin/p/7073601.html
前言
这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧 。想说的东西很多，却又无从说起 。如今轻量级框架如雨后春笋，层出不穷 。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 css 框架 。
在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SmacSS，详见 http://vanseodesign.com/css/dry-principles/） 。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等 。
我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等 。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便 。
 
为什么使用框架为什么使用框架？答案显而易见，效率 。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现 。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS。项目之中最让我头疼的就是类的命名 。我想大多数人都是根据功能去命名，这就造成了很多的冗余，相同的组件可能写很多次 。简单举一个例子，如下图，个人中心的登录界面 。
如何编写轻量级 CSS 框架

文章插图
很多人包括我刚开始的时候可能会选择下面的类命名及布局方式，其通用性非常差：
 <div class="login-area"> <div class="login-img"> <img src=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/"..." /> </div> <div class="login-text"> <a href=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/"...">请点击登录 </div></div>
然而了解 Bootstrap 的人应该一眼就发现上图就是一个 media 对象，无非一些小细节需要调整一下：
 <div class="media"> <div class="media-left"> <img src=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/"..." /> </div> <div class="media-body media-middle"> <a href=https://www.isolves.com/it/cxkf/yy/CSS2/2019-07-23/"...">请点击登录 </div></div>
为了让文字与图片居中对齐，我们可以使用 Bootstrap 的.media-middle的辅助类 。如果在工作中还要根据需求自定义一些辅助类调整细节，当然这是一个移动端的例子，可以选择移动端框架相关的 media 对象 。
另外，在项目改版的时候，原始的方法的修改更是惨不忍睹，可以说是噩梦，冗长的 CSS 文件、混乱的功能划分、类名、色值等等 。最后也只能硬着头皮一点一点修改 。那一刻我才体会到框架的意义以及前端工具的重要性 。我从工作中总结出，要么你可以熟练的使用某一个框架，要么就自己实现一个框架 。
 
前端框架对比目前市面上前端框架主要分重量级与轻量级 。重量级主要有 Bootstrap、Semantic、UIkit、Foundation 等，轻量级有 Pure、Skeleton、Miligram 等 。经常关注前端动态的工程师会发现轻量级框架每年都层出不穷 。在我上面提到的主流轻量级框架之外还有很多类似的框架 。
我一直问自己，为什么要重复造轮子 。经过研究，我发现这些轻量级框架其实大多都不能胜任工作需求，而且模仿的痕迹很重，基本上都或多或少的有 Bootstrap 的影子 。那么这些轻量级框架有没有意义呢？当然有 。但是就我个人观点，选择轻量级框架反倒不如自己实现一个框架 。因为大多轻量级框架就像是工作总结，是根据自己的业务需求实现的 。所以大多不具有通用性 。
前端框架的对比主要以 Bootstrap、Semantic、UIkit 为主，因为我个人感觉这三个最具有代表性，而且设计风格各有特色 。Foundation 也有很多大公司在用，但以我个人观点，无论是框架的易用性还是设计风格，相比其它几个框架稍逊一筹 。
其中 Bootstrap 和 Semantic 是面向对象的最好体现 。
我先说一下 Bootstrap 的优势，不是设计风格，不是模块，不是特效，而是栅格，响应式栅格 。Bootstrap 的栅格在与其它框架对比中占有绝对优势，无论是栅格的划分还是类名的风格都堪称经典 。如果读者有心看一下 Bootstrap 的 Less 源文件，就会感受到 Bootstrap 对于响应式栅格的独具匠心 。其实在 Bootstrap 之前也有很多栅格方案，但是给人的感觉就是不够利索，类名繁琐不好记 。而后来的很多框架，尤其轻量级的框架大多都有 Bootstrap 的影子 。


推荐阅读


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

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