打造个性化轻量CSS框架：提升开发效率与理解深度

102 浏览量更新于2024-08-28 收藏 200KB PDF 举报

本文将深入探讨如何编写轻量级CSS框架，作者分享了自己酝酿已久的写作经验，针对当前轻量级框架众多的背景，提出每个人都应根据自身需求创建定制化的框架。文章首先提及了面向对象的CSS设计方法，如BEM、OOCSS和SMACSS，这些方法强调的是类命名策略，而非具体CSS技巧。许多人对前端框架存在误解，认为它们主要用于后端开发，忽视了前端框架带来的效率提升和面向对象设计的实践价值。作者曾经历过从纯手写CSS到使用框架的转变，最初对框架抱有畏惧和抵触，但意识到框架能够减少重复劳动，提高代码复用性和一致性。使用框架的主要原因在于提升开发效率，通过预设的组件和布局，开发者可以快速构建页面，同时框架也提供了丰富的可扩展性，让面向对象思想得以实现。例如，在实际项目中，作者通过Bootstrap的媒体对象类medi

如何编写轻量级如何编写轻量级CSS框架框架

前言

这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层

出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对

象的 CSS（比如 BEM、OOCSS、SMACSS，详见 http://vanseodesign.com/css/dry-principles/）。这是一种思想，并不涉及

具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员

专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、

害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自

己根据设计图写起来方便。

为什么使用框架

为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。

在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大

多数人都是根据功能去命名，这就造成了很多的冗余，相同的组件可能写很多次。简单举一个例子，如下图，个人中心的登录

界面。

很多人包括我刚开始的时候可能会选择下面的类命名及布局方式，其通用性非常差

　　</div>

　　　　<a href="...">请点击登录</a>

　　</div>

然而了解 Bootstrap 的人应该一眼就发现上图就是一个 media 对象，无非一些小细节需要调整一下

</div>

<a href="...">请点击登录</a>

</div>

为了让文字与图片居中对齐，我们可以使用 Bootstrap 的 .media-middle 的辅助类。如果在工作中还要根据需求自定义一些辅

助类调整细节，当然这是一个移动端的例子，可以选择移动端框架相关的 media 对象。

另外，在项目改版的时候，原始的方法的修改更是惨不忍睹，可以说是噩梦，冗长的 CSS 文件、混乱的功能划分、类名、色

值等等。最后也只能硬着头皮一点一点修改。那一刻我才体会到框架的意义以及前端工具的重要性。我从工作中总结出，要么

你可以熟练的使用某一个框架，要么就自己实现一个框架。

前端框架对比

目前市面上前端框架主要分重量级与轻量级。重量级主要有 Bootstrap、Semantic、UIkit、Foundation 等，轻量级有 Pure、

Skeleton、Miligram 等。经常关注前端动态的工程师会发现轻量级框架每年都层出不穷。在我上面提到的主流轻量级框架之外

还有很多类似的框架。我一直问自己，为什么要重复造轮子。经过研究，我发现这些轻量级框架其实大多都不能胜任工作需

求，而且模仿的痕迹很重，基本上都或多或少的有 Bootstrap 的影子。那么这些轻量级框架有没有意义呢？当然有。但是就我

个人观点，选择轻量级框架反倒不如自己实现一个框架。因为大多轻量级框架就像是工作总结，是根据自己的业务需求实现

的。所以大多不具有通用性。

前端框架的对比主要以 Bootstrap、Semantic、UIkit 为主，因为我个人感觉这三个最具有代表性，而且设计风格各有特色。

Foundation 也有很多大公司在用，但以我个人观点，无论是框架的易用性还是设计风格，相比其它几个框架稍逊一筹。

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38571104

粉丝: 3
资源: 944

打造个性化轻量CSS框架：提升开发效率与理解深度

轻量级UI框架：一个简洁轻量级的 UI 框架，它提供了最基本的组件和 CSS 样式

PHP轻量级框架

aqua.css轻量级纯CSS框架 v1.7.0.zip

kanbasu：用Sass编写的轻量级CSS框架

mui：轻量级CSS框架

preactstarter:preact pwa starter添加了轻量级CSS框架和轻量级状态管理

helder-css-framework:轻量级CSS框架

minimalizr:用Sass构建的轻量级CSS框架

ICECSS(轻量级CSS框架) 1.0.zip

bemskel：用BEM和SASS编写的轻量级CSS框架，用于构建基于组件的可伸缩用户界面

最新资源