ZHUSCAFE

目前在公司的项目中已经大量地使用了原子化 CSS 一段时间了，包括我们的小程序项目和 Web 项目，所以简单总结一下一些实践后的总结与感悟

在很多设计系统中，我们会定一个基础颜色，然后会基于这个基础颜色计算出其他颜色，一个常见的计算是给这个基础色施加一个透明度，如下所示：

今天帮同事看一个图片不显示的问题，情况是在电脑上图片都是正常显示的，但是在 iOS 上发现一些图片显示，一些图片不显示。接到问题的时候对这个问题的描述是没有显示图片的`img`元素没有对应的图片请求，以`background`设置的图片显示都没有问题。这对问题的排查造成了一定的障碍，因为这自然地把问题排查点引向了没有发生这个图片请求的原因。几次试验无果后我仔细看了看无法显示图片的`img`的样式，发现了类似这样的一条规则：

随着组件化的盛行，一些人开始使用 CSS in JS 的方案，目前比较流行的就是 Styled Components，为什么这种方案会被一些人接受并使用呢？我想从动机出发谈谈这个方案。

CSS 属性可以分为继承属性与非继承属性。这决定着当某一属性没有提供值得时候，该属性的值为什么。

今天看到一篇文章, [和transformjs一起摇摆](http://www.alloyteam.com/2016/12/and-transformjs-rock/), 顺便去看了一下源码, 源码不是很多,一百八十多行, 于是仔细阅读了一下, 变形的实现是通过 CSS 的 transform 属性完成的. 一个关键的方法是 `watch`, 代码如下:

在写自定义的 `radio`，`checkbox` 这些东西的时候遇到了一个坑，在这里记录一下。

`px` 相对于显示器分辨率而言。

Modal 是网页设计中经常用到的一种效果，来看看如何用CSS实现吧

大家知道，`linear-gradient` 有一个方向参数，比如下面这样：