什么是css原子化,有什么用?


Posted in HTML / CSS onApril 24, 2022

一、背景

近期因为一些交接事项和后续需求,接触到了之前没有接触过的xx领域。在上手后发现,与之前主要负责的方向相比,样式的比重明显增加,在css上更小的颗粒度和密集度让我觉得有些吃力,尤其是少数文件还应用了某种我不熟悉的带前缀的类名,而在全局却无法对其进行检索,让我陷入了疑惑。在询问得知这是css原子化的写法之后,看了相关文档我也并没有很快的理解。但渐渐有了一些理解和兴趣。我发现之前自己上手困难并不是css原子化有高的上手门槛,而是缺少相关理解和更快速上手的指引。

为了更好的将css原子化作为技术储备,在之后合适的情况下产生效果,这里通过两篇文章分别专注分析探究和后续开发快速上手进行讲解,以让大家对原子化css产生理解,并且解决文档缺乏和上手慢的问题。

本文主要从开发效率和包体积两方面展开分析,并最后选择框架windicss,在此之前先进行一些铺垫

二、什么是css原子化,又有什么用?

1.含义分析

其实相关的概念很简单,先用一种官方些的描述是这样的 “原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名。”

我个人大概可以根据这个话从三个方面开始介绍。

  • 原子化 CSS 是一种 CSS 的架构方式
    • 可能大多数同学对此并不是很熟悉,其实说起它的架构方式,并没有一些很严格的门类。但大家应该都知道相关的一些css方案,比如一直在用的css预处理器,他可以让我们更效率地书写样式,还有css-in-js等
    • 过去以更加组件化和整体工具类的方向作为css的最佳实践,原子化css算是一个不同的声音。关于各种css方案更详细的一些我就不清楚了,大家明白的可以与我交流
  • 它倾向于小巧且用途单一的 class
    • 在最初看到每个引用的类里面只有一个单一的功能,很小巧的时候,并没有完全明白
    • 但其实这就是 “原子” 的精髓,它的原子化可以让我们无比的灵活
    • 就像这样,如果一个类里包含两个功能那么他就不是原子css了
    • 比如这样
.bw-2x {

border-width: 2px;
}
.bss {
  border-style: solid;
.sans {
  font-style: sans-serif;
  • 并且会以视觉效果进行命名
    • 不知道你有没有在某些时候被去起一个类名被停顿过,特别是在有大量模版的时候,这有的时候还是挺难的
    • 直接用框架封装好的类,就不用考虑这个问题了,并且根据视觉的类名,你可以很容易的举一反三

2.方案选择

css原子化的思想有了之后,具体的发展其实如果也是有一段路程的

试想一下,如果你想要有十个类,去承载一个数字对应的margin尺寸,是否就需要手写十个类呢?这是太重复的操作了吧!很难让人忍受。如果用scss的能力的话看上去会好一点,去写一个循环

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: $i / 4 rem;
  }
}

这样就有十个以等加排列的margin类了,但如果我们最后只用到了其中的五个,这就直接浪费了一半的空间,因为其余五个类是无用的。这样大家应该明白,单纯的css原子化,我们自己也可以去实现,我们可以去预备的书写大量的原子类。但如果我们想要项目中更合理的去使用,我们无疑需要框架帮助。

它可以帮我们解决掉那些麻烦,一个早已做大做强的css原子化框架Tailwind最初是这么做的,Tailwind 通过使用purgecss来扫描产物并删除你不需要的规则。这得以使其在生产环境中 CSS 文件缩减为几 KB。但是有个问题!!这个清除操作仅在生成构建下有效,而开发环境下仍要使含了所有规则巨大的 CSS 文件。能够按需生成无疑是更好的选择

所以windicss从零到一解决了这个问题,因为我很关注的开源开发者  Anthony Fu 是其重要的成员,这也让我更加对windicss进行了了解。虽然之后Tailwind也有了相关按需加载的功能,但windicss新出的属性化模式等功能我觉得很棒,并且它更轻量,所以之后的方案我选择继续沿用winding-css

css原子化可以不断发展,受众越来越多,Anthony Fu在内的很多开发者都对其爱不释手,它有着它的优越性,当然也有着它的缺点。如果想在工作环境中使用,必须经过客观的分析

三、开发体验可行性

优点

1.开发的效率和舒适

预定义功能类的简洁舒适,下边放一个赏心悦目的例子,来自tailwind,其实和我平时写小程序基本一样的

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
</div>
<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
</style>

再看一下应用了原子化的文件呢?

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
</div>

怎么样,是不是很清爽!但可能有的同学不这么觉得,好多不认识的类名,一团糟的样子。但是等我们了解了它的使用之后,这些类名也会变的一目了然,再存在大量样式的情况下,它的开发体验真的很赞,我觉得你百分之九十会和我一样喜欢它的效率

其实它在使用上还有更多爽快的方法,比如@apply,自动值推导,属性话模式等。但这些过于使用层面的功能在之后使用方面的文章写更合适,你现在只要记得,多样式场景,会很爽就足够了

2.灵活和可维护

有的同学是否会担心?我用了很多定制化的原子类,是不是就无法随心所欲的定制我们的样式了?

这个其实不用担心,虽然实际上就算单单只用原子化css我们就可以满足90%以上的场景,但是毕竟一些复杂的样式效果还是需要简单学习下的。所以我们要知道,我们去在模版里所添加的原子类,都只是在盒子上挂载的普通类名,这意味着就算我们不是熟练的windicss使用者,我们也可以用原子类和自定义类混合的方式,我们自定义的样式是更高的。我们可以只顾着爽地去快速解决绝大部分样式,就算剩下的样式你还没有掌握如何去用windicss书写,你也靠可以自己完成

缺点

1.仍存在的上手门槛

虽然我相信,在你看过我的使用篇后,会很快的上手开发。但是在初见之时,这确实需要接受的过程,所以如果并不觉得样式多的让你感觉到压力的话,你可以只是了解一下~

2. 小程序使用windicss受到阉割

目前的工作场景,很多样式复杂场景都是在小程序端的,但因为wxss的选择器选择比较有限,windicss的一些功能在小程序端是用不了的,这个在使用篇会细说。但是实际上,我认为也不算是明显的缺点,一些常用的功能已经足够了。

四、包体积可行性

熟悉小程序的应该都知道,当我们开发一个小程序,特别是是一个大型,复杂的小程序的时候,包体积是多么的重要。作为一个深度参与着包体积治理的开发,并且曾经遭受过包体积溢出的苦,我想我对包体积一直是有着敏感性的。如果此方案能够对包体积起到效果的话,确实是它的一大优势。

据说facebook用css原子化缩减了首页80%的css体积?虽然肯定也会增加html体积,也并不是很清楚其中细节,但这种消息也很让人诱惑,哈哈

优点

1.对wxss文件的有效缩减

为了亲自探究引入windicss是否对样式体积有着缩减,通过分包,分组等进行分类。我找出了目前项目中引用了少量windicss的版本,和之前的版本。在把他们的report.json进行比对之后,重点关注了几个除了换用windicss,没有其他明显变化的文件。

这几个文件都是多样式,并且以windicss的使用为变量的文件。虽然只有零点几kb的缩减,但在小程序紧张的包体积中,这已经是很有价值的修改了,这只是少部分文件而已

缺点

尽管windicss的按需引入已经做得很不错了,但是毕竟也是有一点额外体积的。所以如果你并没有多少冗余的样式需要去淘汰的话。windicss在包体积方面,并不能对你有多少帮助

五、 总结

经过以上介绍和分析,我相信在合适的场景下还是非常适合饮用原子化css的相关概念的。

到此这篇关于css原子化项目落地可行性分析和探究的文章就介绍到这了,更多相关css原子化项目落地可行性分析内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
利用CSS3实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
css3 文字断裂效果
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 #HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 #HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
You might like
解析php如何将日志写进syslog
2013/06/28 PHP
PHP中echo和print的区别
2014/08/28 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
ECMAScript中函数function类型
2015/06/03 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python pandas生成时间列表
2019/06/29 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
纽约海:Sea New York
2018/11/04 全球购物
给物业的表扬信
2014/01/21 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书