[翻译]为什么我们放弃了使用CSS-in-JS

我是Sam,Spot的一位软件工程师,也是Emotion库第二活跃的维护者。Emotion是一个在React项目中被广泛使用的CSS-in-JS库。这篇文章将深入探究最初吸引我使用CSS-in-JS的原因,以及为什么我(及Spot团队的其他成员)又决定放弃它。

我们将从CSS-in-JS的概述开始,并简要介绍一下它的优缺点。然后,我们再深入探究在CSS-in-JS在Spot上引发的性能问题,以及如何避免它。

什么是CSS-in-JS?

顾名思义,CSS-in-JS允许你直接在JavaScript或TypeScript中写入CSS来设置你的React组件样式:

// @emotion/react (css prop), with object styles
function ErrorMessage({ children }) {
  return (
    <div
      css={{
        color: 'red',
        fontWeight: 'bold',

背景图片千万不要gzip压缩,尤其是PNG

我们网站的静态资源(css、js和背景图片)和web应用程序是分开部署的,几乎所有的静态资源都部署在同一个应用下。最开始的网站很简单,对所有的静态资源都进行了gzip,包括所有的css,js,图片,flash等等,也一直相安无事。

直到……直到有一天用了png做背景图片,并且上传到服务器进行部署,发现在很多IE6都会在这个页面卡死,无法动弹,出事的几率非常的高。但是在内网部署的没有任何问题,那问题就只能比较内网和公网的服务器环境了。观察HTTP请求头部是个不错的方法,很快锁定是由于gzip的png引起的。内网服务器加上gzip测试,果然如此。

其实对图片等文件进行gzip是完全没有必要的,原因很简单:在web里面用作背景的图片99%以上都是gif或者jpg或者png,这些格式本来就是压缩过的,再用gzip对他们进行压缩只是徒增服务器负担而已。…

在IE8中继续使用滤镜及IE8的一些CSS扩展属性

很早以前就说过,IE8的标准模式已经不再支持滤镜了,不过IE仍然留了一条后路,你可以在CSS中这样写滤镜:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

当非常遗憾的是,这个属性只有IE8能认识,如果要兼容IE6还有IE7,你必须在这一行的后面继续加上以前的滤镜代码:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

注意:这个先后顺序非常重要!这会影响到IE8兼容模式下的显示效果。

官方blog(IE Blog)的关于在IE8中使用滤镜原文在这里

另外,这里还有IE8的私有CSS属性列表

IE8标准模式不再支持CSS表达式(Expression)

IE8标准模式不再支持CSS表达式(Expression)

原文地址:Ending Expressions

标准遵守情况、性能、可靠性和安全性等设计标准构成了IE8的设计整体,包括新的和已经存在功能特性。最终,IE8的标准模式不再支持CSS表达式(CSS Expression)。这个变化在以前就曾经在IE blog上公布过,这篇文章将提供关于这个决定的更详细的一些信息。下面的FAQ(常见问题)将给您一个快速的总览:包括它的功能特性、我们设计决定的背后原因以及这对你的网站有什么影响。

什么是CSS表达式?

它也被称为“动态属性”,这个特有的CSS扩展是在IE5中引入的。远远在jQuery和Dojo等JavaScript库的诞生之前,它允许web开发者动态地通过CSS选择器来给页面绑定脚本。举一个例子,下面的CSS声明根据一天中的事件来更新页面中某些区块的背景颜色:

div.title { background-color:

UL/OL的预设标记在IE和Firefox等浏览器下的差别

先说句题外话,昨天Silverlight 2.0发布了RTW(很多人都以为是RTM,这里的RTW是针对互联网版本的一个说法:Release to Web)版本。今天一大早的打开Google Reader,发现Flash Player 10和Flash CS4的文档已经发布了,中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了,至少在新版本的发布上已经有这个意思了。

===========严肃的分割线============

好了,言归正传,回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记,就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。

很多时候,很多人不喜欢这个玩意儿,于是就想把它藏起来,这个也很好办,这么一行就搞定了:

ul{
    list-style-type:none;

原来Chrome支持::selection样式表设置

这个是用来设置被选择文字的背景色和文字颜色(就是文字高亮时的样子),例如:

Chrome支持::selection,Firefox是支持::-moz-selection,IE就啥都不支持了,不过这两个样式要分开写,像这样:

::selection{
    color:#f0d000;
    background-color:#0f581a;
}
::-moz-selection{
    color:#f0d000;
    background-color:#0f581a;
}

CSS引起的IE 7奇怪的Crash

有个页面,写CSS测试时本地没有任何问题,上线后,不少人说用IE 7打开那个页面会Crash,用其他浏览器正常。系统多是Windows XP加上Internet Explorer 7,其中部分IE7是绿色版的(比如我的),还有部分装了Visual Studio。

最开始以为是javascript的问题,一个一个删除被怀疑的javascript代码,直到最后完全没有javascript代码,发现IE 7还是会Crash掉。再去掉CSS代码,发现居然好了,很稳定,怎么试都不出问题了。

开始逐步排查CSS代码,最开始还怀疑是PNG图片用了滤镜的问题,最后才发现不是这个问题,而是这样一行代码有问题:

.slide_indexwind .focus{width:402px;height:182px;overflow:hidden;}

第一次,把focus的名字改了一下,打开,好了,于是以为问题解决了。

过了不久,又有人报还是会Crash,于是直接把这一行删掉,好了,怎么刷也没有问题了,实在是不明白为什么?有没有人碰到过类似的问题呢?…

用CSS在图片上再加一个小按钮

很简单的,嗯,就是要做成这样的:

用CSS,当然得用层了,就是在图片上再加一个层,用来放那个按钮,按钮又有两种方式可以放,一种是直接用图片img标签,一种是通过背景图片放上去。这里我们就用背景图片这个方式来做吧!

首先准备这样两张图片:
宽19px,高32px
宽120px,高90px

我们想想:底部要放图片,上面要放一个按钮,貌似需要用到绝对定位,那我们需要为图片再定义一个div样式,用来放图片和这个按钮,我们可以这样写:

.expdiv{
padding:4px;
width:120px;
border:1px solid #c8c8c8;
}

剩下的就是关键的把按钮放上去,在这里,按钮是一个链接,我们可以设置链接的显示方式为block,并设置其z-index值为2(只要比0大都可以),设置其宽高分别为19px和16px(我们只需要显示按钮图片的一半就可以了),那代码可以这么写:

.expbtn{
position:absolute;

用CSS轻松实现圆角

一直以为用CSS做一个圆角的链接会很麻烦,在蓝色理想上看到一些漂亮的圆角链接,背景图片还可以切换,于是下载下来看了一下,发现原来实现起来也很简单。下面这个是效果图:

具体实现方法如下:
先制作好这样两张背景图片,一张为左边的圆角,比较窄,另一张为右边的圆角,比较宽(为了使较长的链接仍能正常显示),如下图:
(left.gif)
(right.gif)

CSS代码为(注意其中的背景图片的定位,这个是实现效果的关键所在):

body {
margin:0;
padding:0;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
background-color:#fff;
text-align:center;
}
#tabs{
margin-left:auto;
margin-right:auto;
margin-top:40px;
width:100%;
background:#fff;

CSS到底有多强,请看这个

老外经常喜欢做一些令人目瞪口呆的事情,这不又出现了两个纯用CSS实现的房子,我看到的第一眼就目瞪口呆了,然后开始找他有没有用图片。没有找到,只好无限佩服了!

为方便读者,已经把原网页复制了一份:
CSS House 1:http://fdream.net/blog/upfile/csshouse1.html
CSS House 2:http://www.afdream.com/blog/upfile/csshouse2.html

原页面地址:
CSS House 1:http://www.designdetector.com/tips/3DBorderDemo2.html
CSS House 2:http://www.designdetector.com/demos/css-house-2.html

BTW:还是最大限度的照顾低分辨率用户,当客户端的分辨率为800×600时,不使用绿色夏天作为默认样式,而自动使用样式蓝色清新