写点什么

什么???CSS 也能原子化! | 京东云技术团队

  • 2023-10-16
    北京
  • 本文字数:3027 字

    阅读完需:约 10 分钟

什么???CSS也能原子化! | 京东云技术团队

1.什么是原子化 CSS?

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. Let’s Define Exactly What Atomic CSS is


上文的意思翻译过来就是原子化 CSS 是一种 CSS 的架构方法,倾向于使用用途单一且简单的 CSS,通常是根据视觉效果进行类的命名,不同于 BEM 规则的 CSS,原子的意思就是将 CSS 进行拆分,每个样式都有一个唯一的 CSS 规则,例子如下,每个样式都配置一个固定类名:


// margin为0px.m-0{    margin:0px;}// 文字为红色.text-red{    color:red;}.font-blod{  font-weight:blod;}.text-center{   text-align:center;}
// 样式使用方式 <div class = "m-10 text-center text-red font-bold font-size-[48px]">你好原子化CSS</div>
复制代码


样式效果如下所示:



目前有很多种原子化的框架,例如 Tailwind CSSWindi CSS 以及 Tachyons 等。

2.为什么要原子化 CSS?


传统方式可能会使用比如 scss 预处理器生成自己想要的 class 类,如下所示:


@for $i from 1 through 10 {  .m-#{$i} {    margin: $i px;  }}// 结果为:.m-1 { margin: 1 px; } .m-2 { margin: 2 px; } /* ... */ .m-10 { margin: 10 px; }
复制代码


上述方式会产生很多场景下可用的 class,可以涵盖很多场景,但是其中也会有很多种并不会被使用到,从而了导致大量的冗余;因此原子化 CSS 中对于这个也进行了优化,通过按需加载的理念进行预设等方式减少 CSS 的打包体积;


相比原始写法,应用原子化 CSS 可以减少很多 CSS 的书写工作,减少每次新增一个新的样式而重复新增的代码,比如一个项目中 flex 和 margin 配置一般都会重复写很多次,使用原子化 CSS 不用重新去写这些样式,直接绑定相对应的 class 类名就可以起到同样的效果,因此减少了项目整体的代码行数量和无用的工作量;


在样式编写层面,​​CSS​​​预处理和后处理器很大程度上依赖单独的样式表,原子化​​CSS​​​可以充分利用​​Sass​​​、​​Less​​​等​​CSS​​​预处理器功能进行样式的编写,同时可以借助​​PostCSS​​​进一步增强​​CSS​​​的功能。而对于行内样式,虽然在技术上支持使用预处理和后处理器对其进行处理,但很少有成熟的工具对此提供支持和维护。


在一致性层面,原子化​​​CSS​​​框架一般有预定义的设计系统,开发者仅能在设计系统中选择要设置的值。而对于行内样式或者传统​​CSS​​​类定义来说,可设置的值是没有任何限制的。对于行内样式或者传统的​​CSS​​​类设置来说,一个标签的字体大小可能是​​14px​​​或​​0.875rem​​​,当产品(​​or​​​ 客户)说需要调小一点时,开发者 A 可能调整为​​13px​​​,开发者 B 可能调整为​​12px​​​。但对于原子化​​CSS​​​框架来说,调小一点意味着设置的类从​​text-sm​​​变为​​text-xs​​。


总的来说原子化 CSS 可以减少 CSS 的体积,同时提高 CSS 类的复用率,减少类名起名的复杂度;但是由于多种 CSS 样式堆积,可能会造成 class 名过长的缺点;同时增加记住 CSS 样式的记忆成本;


那么目前哪些人在使用原子化 CSS 呢?


一些网站已经开始使用原子化 CSS 比如 github , swiper.js 等↓如下图所示,他们页面的 CSS 类型可以明显看出是使用了原子化 CSS



3.一种原子化 CSS 框架-UnoCss

UnoCSS 是一个引擎,而非一款框架,因为它并未提供核心工具类,所有功能可以通过预设和内联配置提供;


跟 Vite 的按需加载的理念一样,unocss 提供用啥打包啥的使用方式,极大的减少了内存和提高了运行速度,并且提供插件预设进行增强,可以使用自定义规则进行 rule 校验,增加个性化开发的方式。


UnoCSS官网链接


具体使用方式如下:

1.搭建环境

确保你项目的 node 版本>=16


pnpm add -D @unocss/preset-uno
复制代码

2.修改配置

2.1 修改 vite.config.js

如下面代码所示,将 Unocss 引入


import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import viteCompression from 'vite-plugin-compression'import UnoCSS from 'unocss/vite'export default defineConfig(({command, mode})=>({ plugins: [  vue(),  viteCompression(),  UnoCSS({configFile: '../uno.config'})  ] })  // 引入下文配置好的config文件
复制代码

2.2 创建 uno.config.js

import {    defineConfig,    presetAttributify,    presetIcons,    presetTypography,    presetUno,    presetWebFonts,    transformerDirectives,    transformerVariantGroup  } from 'unocss'import presetUno from '@unocss/preset-uno'export default defineConfig({   rules: [        [/^mg-0.([\.\d]+)$/, ([_, num]) => ({ margin: `(${num}px)` })],    ],    shortcuts: [      // ...    ],    theme: {      colors: {        // ...      }    },    presets: [      presetUno(),      presetAttributify(),      presetTypography(),      presetWebFonts({        fonts: {          // ...        }      })// 使用自带的内部预设,按需引用    ]     transformers: [transformerDirectives(), transformerVariantGroup()] })
复制代码

3.UnoCSS 多种功能:

3.1 自定义样式规则:

在 config.js 里面可以自定义规则,比如 mb-300px 是官方的,下面可以写 mg-10 是因为我在 config 文件里面自定义设置的 rules 正则规则,代表:margin:10px;


规则配置代码如下所示:


 rules: [ [/^mg-0.([\.\d]+)$/, ([_, num]) => ({ margin: `(${num}px)` })], ],
复制代码

3.2 图标:

<!-- A basic anchor icon from Phosphor icons --><div class="i-ph-anchor-simple-thin" /><!-- An orange alarm from Material Design Icons --><div class="i-mdi-alarm text-orange-400" /><!-- A large Vue logo --><div class="i-logos-vue text-3xl" /><!-- Sun in light mode, Moon in dark mode, from Carbon --><button class="i-carbon-sun dark:i-carbon-moon" /><!-- Twemoji of laugh, turns to tear on hovering --><div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
复制代码


展示效果如下,鼠标动上去会进行旋转等动效:



3.3 属性模式:

相比普通模式来说可读性和可维护性更高;两种模式相比较,属性模式样式更为直观,可读性更强一点;


//使用属性模式和普通模式进行对比:// 普通模式:<div class="bg-blue-400 hover:bg-blue-500 text-sm text-white py-2 px-4 border-2 rounded border-blue-200">普通模式 </div>//属性模式<div   bg="blue-400 hover:blue-500"  text="sm white"  font="mono light"  p="y-2 x-4"  border="2 rounded  blue-200">  属性模式</div>
复制代码


效果如下所示:



同时在 vscode 安装 UnoCSS 插件后写代码还会有提示能力,放置在 css 样式上还会浮现具体 CSS 样式使得开发更加简单~如下图所示,在写类名的过程中会进行代码提示,非常友好;



4.个人感受

在使用 UnoCSS 的过程中,感受到了不用写<style></style>的快乐,不用来回穿插 CSS 文件和 VUE 文件,CSS 类名随手就写上,想要什么样式往上堆积就行,还不用去绞尽脑汁的去想起什么类名,带来了很多便捷的地方;但是也存在一定的困难点,就是会造成无法快速定位样式问题的困惑;


总而言之,UnoCSS 还有许多值得去探索的地方,这里只展示了其中的一部分我认为有趣的地方,开源项目总会有很多 bug 等着我们去解决,一起探讨吧~


作者:京东保险 卓雅倩

来源:京东云开发者社区 转载请注明来源

发布于: 52 分钟前阅读数: 2
用户头像

拥抱技术,与开发者携手创造未来! 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者,提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】,欢迎大家来玩

评论

发布
暂无评论
什么???CSS也能原子化! | 京东云技术团队_CSS_京东科技开发者_InfoQ写作社区