转载自 antfu 的 重新构想原子化 CSS

简介

原子化 CSS

我们通常写 CSS 是这样的：

1

<div class="container"></div>

1
2
3
4
5

.container {
  font-size: 16px;
  border: 1px solid #000;
  padding: 4px;
}

给朋友做个简单网站，他想直接打包后生成的静态文件丢浏览器就能访问。但打包后发现浏览器报错，提示跨域问题，不支持files协议，主要是因为esModule问题。

起因

后端表示实际生产环境下某个大屏页面经常 CPU 处于满负荷状态，页面呆太久还容易出现卡顿，需要排查下什么原因并解决。

原文链接：https://ishadeed.com/article/clip-path/

以前当我第一次学习 CSS clip-path 时，我花了比预计更多的时间，并且也很难记住它。我不知道确切的原因，可能是因为我没有经常使用它吧? 不管怎样，我会和你一起重新学习它。

转载地址：https://segmentfault.com/a/1190000023362699

1
2
3
4
5

<span style="display: inline-block;width: 50px;>
    <p style="display: inline-block;white-space: nowrap;margin-left: 50%;transform: translateX(-50%);">
    黄浦哇哈哈乐百氏777哇哈哈很好的呀区
    </p>
</span>

要点：

1. 子元素要设置不换行，并且是个内联块级元素，这样文本就拥有了实际宽度。
2. 基于父元素50%宽度向右平移，将基准点定位在父元素中心点，即margin-left: 50%。
3. 基于文本自身的宽度向左偏移一半的文本长度，即transform: translateX(-50%)。

起因

接到一个需求是实现 Chrome 浏览器自带的「Ctrl+F」搜索功能。起初想当然的以为直接正则+replace 不就搞定了么。但后边发现直接粗暴的 innerHTML + replace 会导致 Vue 的响应式以及事件绑定都失效。所以得想其他的法子。

包管理器的介绍

npm 简史

在npm@3之前,如下图：

从上面可以看到，包是一层一层的安装的。那么这样会有些问题。

最近接了个需求要实现 Chrome 的查找功能，也就是在当前页全局搜索高亮输入的关键词，可以上下翻阅，和 Chrome 自带的 Ctrl + F 功能一样。

今天创建 Vue 项目时，偶尔发现生成的默认页面能根据系统主题色做出相应改变。