css 技术调研

Y爱学习106066
140 阅读4分钟

node-sass 与 dart-sass

image.png

image.png

  1. 为什么舍弃node-sass ?
  • node-sasa在npm安装时大概率出错。
  • 安装时要和node版本对应。
  • node-sass已经停止更新（2020年10月）,dart-sass新功能优先支持

dart-sass现在是官方推荐的，早在2016年10月31号的公告就说明了为什么重写sass和为什么选择dart以及后续的计划，可以去官网看看：sass-lang.com/blog/announ…

大概的意思是sass之前的实现ruby sass迭代容易，但是运行速度慢，不易安装。libsass则是速度快，迭代慢。选择dart，速度是rubby sass的5-10倍，只比libsass慢1.5倍左右。而且dart可以编译输出JavaScript，兼容nodejs。

  1. 项目中使用
  • 使用node-sass
npm install sass-loader node-sass
  • 使用dart-sass
npm install dart-sass sass-loader

4.替换node-sass为dart-sass

npm uninstall node-sass
npm i sass （dart-sass@1.25.0 版本后重命名为sass）

替换项目中的深度监听器

  1. sass 只支持 ::v-deep （简写 :deep(selector)）
  2. node-sass 支持 /deep/和::v-deep

css modules

css面临的问题？

  • 全局污染，样式覆盖问题
  • 命名混乱
  • 命名冲突
  • 无法共享变量

目前主流的解决冲突方案：

  1. CSS 命名方法论：通过人工的方式来约定命名规则。
  2. HTML5的style scoped。
  3. CSS-in-JS：在 JS 中写 CSS。
  4. CSS Modules：一个 CSS 文件就是一个独立的模块

什么是css modules?

image.png

所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，对 CSS 类名和选择器限定作用域的一种方式（类似命名空间）任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件

css module 遵循以下思路解决类名冲突问题：

  • css的类名冲突往往发生在大型项目中
  • 大型项目往往会使用构建工具（webpack等）搭建工程
  • 构建工具允许将css样式切分为更加精细的模块
  • 同JS的变量一样，每个css模块文件中难以出现冲突的类名，冲突的类名往往发生在不同的css模块文件中
  • 只需要保证构建工具在合并样式代码后不会出现类名冲突即可

image.png

。

原理与使用：

blog.csdn.net/qq_39221436…

CSS Modules 通过编译时对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题 换句话说：所有类名都具有 “局部作用域” ，只在当前组件内部生效

使用

  1. 基础用法：
<template>
    <div :class="$style.color">red</div>
    <div :class="groupB.color">green</div>
</template>

<style module>
.color{
  color: red;
}
</style>
<style module="groupB"> // 自定义注入名称
.color{
  color: green;
}
</style>

image.png

2.模块样式复用

<template>
  <div>
    <div :class="`${$style.color} ${border.border}`">red</div>
  </div>
</template>
<script lang="ts" setup>
 import border from './style.module.css'
</script>
<style module>
.color{
  color: red;
}
</style>

style.module.scss文件

.border{
  border: 1px solid red;
}

image.png

  1. 组合样式：可以有多个composes规则，但composes规则必须在其他规则之前
<div data-role='test' :class="`${$style.color}`">red</div>
.font30{
  font-size: 30px;
}
.color{
  composes: font30;
  color: red;
}

image.png 4. 全局样式：

<div :class="groupB.color + ' blue'">green</div>
<div :class="$style.blue">blue</div> // 不能直接用$style绑定吧，不生效

<style lang="scss" module>
:global .blue {
  color: blue;
}
</style>

image.png

5.与组合式APi一起使用

<div :class="usecss.color">组合式样式</div>
const usecss = useCssModule('groupB') // 不传默认返回 <style module> 中的类

<style module="groupB">
.color{
  color: green;
}
</style>
  1. 关于样式覆盖问题: 由于生成出的选择器名称不定，可能会经常变动，对于组件库的使用者来说，在外层不能对组件样式进行覆盖。
<div data-role='test' :class="`${$style.color}`">red</div>

<style lang="scss" module>
.color{
  color: red;
  // composes: border form './style.module.css';
}
[data-role="test"] {
  color: aqua;
}
</style>

image.png

因为CSS Modules 不会覆盖属性选择器,所以可以利用属性选择器来解决这个问题

css modules优势
  • 解决全局命名冲突问题 css modules只关心组件本身 命名唯一（不使用选择器，只使用class名来定义样式）
  • 模块化 可以使用自身模块中的样式以及另一个模块的样式 (显式依赖)

css 样式库调研（原子化css）

什么是原子化？

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 有些人可能会称其为函数式 CSS，或者 CSS 实用工具。本质上，你可以将原子化的 CSS 框架理解为这类 CSS 的统称：

.m-0{
    margin: 0;
}
.m-1{
    margin: 1px;
}
.text-red{
    color: red;
}

一个 CSS 属性这种原子化 CSS (Atomic CSS)

常见的CSS 样式的方案分类

<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>
<div class="rounded-lg p-4"> Click </div>
<div class="button"> Click </div>
<Button> Click </Button>

越往下走，颗粒度越来越大，约束性变高，自由性不足。而 Acss 位于第二层。

原子化css优缺点？

优点

  1. 不用担心命名冲突和样式覆盖。
  2. 减少了css体积，提高了css复用
  3. 使用模板字符串轻松完成动态css。
  4. 减少起名的复杂度

缺点：

  1. 增加了记忆成本
  2. 增加html复杂度

原子化组件库

jishuin.proginn.com/p/763bfbd6b…

  1. Tailwind css：(一个借助了vscode代码提示插件实现了快速写样式的原子类库)是一个功能类优先的css框架，它集成了flex,text-center, rotate-90这样的类，他们能直接在脚本标记语言中组合起来，构建出任何设计。

  2. Windi CSS Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

avatar
文章
阅读
粉丝