什么???CSS也能原子化!

这篇具有很好参考价值的文章主要介绍了什么???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 CSS,Windi 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的过程中,感受到了不用写的快乐,不用来回穿插CSS文件和VUE文件,CSS类名随手就写上,想要什么样式往上堆积就行,还不用去绞尽脑汁的去想起什么类名,带来了很多便捷的地方;但是也存在一定的困难点,就是会造成无法快速定位样式问题的困惑;

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

作者:京东保险 卓雅倩

来源:京东云开发者社区 转载请注明来源文章来源地址https://www.toymoban.com/news/detail-710756.html

到了这里,关于什么???CSS也能原子化!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • C++并发编程 | 原子操作std::atomic

    目录 1、原子操作std::atomic相关概念 2、不加锁情况 3、加锁情况  4、原子操作 5、总结 原子操作: 更小的代码片段,并且该片段必定是连续执行的,不可分割。 1.1 原子操作std::atomic与互斥量的区别 1) 互斥量 :类模板,保护一段共享代码段,可以是一段代码,也可以是一个

    2023年04月26日
    浏览(36)
  • 面试专题:java多线程(3)---关于 Atomic 原子类

    1.介绍一下Atomic 原子类Atomic     翻译成中文是原子的意思。在化学上,我们知道原子是构成一般物质的最小单位,在化学反应中是不可分割的。在我们这里  Atomic   是指一个操作是不可中断的。即使是在多个线程一起执行的时候,一个操作一旦开始,就不会被其他线程干扰

    2024年02月07日
    浏览(57)
  • C++ 中的原子变量(std::atomic)使用指南

    原子变量( std::atomic )是C++中用于多线程编程的强大工具之一。它们提供了一种线程安全的方式来访问和修改共享数据,而无需使用显式的互斥锁。本文将介绍 std::atomic 的基本概念、使用方法、常见应用场景以及示例代码,适合入门级读者。 原子变量是一种特殊的数据类型

    2024年01月21日
    浏览(40)
  • 原子范数 Atomic norm最小化: 简单的Matlab例程

    基于 压缩感知的尽头: 原子范数最小化 中的原子范数最小化算法, 笔者做了一些matlab的仿真, 作为简单的例程,希望帮助大家进一步理解算法和自定义的拓展。 由于凸问题的求解需要使用 CVX, 因此需要读者先自行安装好 matlab 的 CVX包。 假设接收天线有 64 64 6 4 根, 有 3

    2023年04月08日
    浏览(89)
  • 【C++入门到精通】 原子性操作库(atomic) C++11 [ C++入门 ]

    当谈及并发编程时,确保数据的安全性和一致性是至关重要的。在C++11中引入的原子性操作库(atomic)为我们提供了一种有效且可靠的方式来处理多线程环境下的数据共享与同步问题。原子操作是不可分割的操作,它们可以确保在多线程环境中对共享数据的读写操作是原子的

    2024年02月03日
    浏览(38)
  • 震惊!CSS 也能实现碰撞检测?

    本文,我们将一起学习,使用纯 CSS,实现如下所示的动画效果: 上面的动画效果,非常有意思,核心有两点: 小球随机做 X、Y 方向的直线运动,并且能够实现碰撞到边界的时候,实现反弹效果 小球在碰撞边界的瞬间,颜色发生随机的变化 嗯?很有意思的效果。 看上去,我

    2024年02月12日
    浏览(29)
  • 原子css 和 组件化css如何搭配使用

    如果让你来实现下面这种页面,该怎么实现呢 原子化和css组件化方式写法,可以搭配起来使用,常用的css 原子css 比如 下面这些类似flex 布局,lstn curser-pointer 等常用的或者 具备一定规律性的padding margin 样式可以抽取为单独的原子类使用 对于比较大的公共类,比如一些比较通

    2024年02月12日
    浏览(37)
  • tailwindcss -原子化 CSS 框架

    我记得很久之前有时候为了少写些css,我们通常会有如下的样板代码 这样我们可以很方便的复用一些样式,可以偷那么一点点懒。 类似上面把 样式分解为尽可能小的样式类,每个表示一个具体的样式,比如 字体大小、颜色、边框 等,然后将这些单位组合起来,可以快速创

    2024年02月11日
    浏览(44)
  • unocss和tailwindcss css原子引擎

    tailwindcss官网 https://tailwindcss.com/docs/grid-column 基本介绍及优点分析 Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站 PostCss 处理 Tailwind Css 基本流程 PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网 在 vscode 中,安装 Tailwind Css 插件,增加

    2024年02月07日
    浏览(40)
  • Unocss(原子化css) 使用(vue3 + vite + ts)

    首先初始化一个vite项目 使用pnpm安装 使用npm 安装 使用yarn 下载Unocss依赖 安装unocss和三个预设,第一个是工具类预设,第二个是属性化模式支持,第三个是icon支持 在vite.config.ts中引入 最后在main.ts中引入uno.css 然后就是使用 最后的效果展示 例如查询颜色为red, 使用可以使用

    2024年02月06日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包