CSS揭秘 读书笔记（1）

[jiangjiu]

这是一个系列，记录了对于《CSS揭秘》这本书的感悟和有意思的细节。

这个系列并不会简单的罗列书中所有的内容，写在这里的都是值得思考的东西。

CSS 编码技巧

尽量减少代码重复

说到编程语言的DRY原则，相信大家都不会感到陌生。

对于CSS这门DSL的呢?

行高

font-size: 16px;
line-height: 24px;

上述代码存在的问题是，因为行高使用了绝对值的属性，当我想改字号时，还要再改行高。

font-size: 16px;
line-height: 1.5;

使用相对单位，当涉及需求修改时，只需要改动一个地方。

单位

针对绝大部分移动端以及部分pc端的页面开发，我们都不太会直接使用px单位了，那么目前的相对单位中，vw、rem、em如何取舍呢？

width: 1rem;
height: 1rem;

width: 1em;
height: 1em;

vw和rem这种继承于一个全局状态的单位，适合做整体缩放的单位；em这种继承于父级元素，适合于局部组件的封装。

业务中可以根据具体的业务场景进行合适的区分。

代码易维护 vs 代码量少

如果要为一个元素添加一条10px宽的边框，但左边不加边框。

border-width: 10px 10px 10px 0;

这一行代码就可以了。

但是，当以后要修改border-width的宽度时，要修改三个地方...

border-width: 10px;
border-left-width: 0;

拆成两条，会让以后的修改更加轻易。👆🏻

// stylus预处理器
$bw = 10px;
border-width: $bw $bw $bw 0;

👆🏻如果使用预处理器或者css变量，甚至可以做到可维护和代码量少的集合 ~

CSS变量

以往我们会认为css是一门静态的DSL，基本不具备动态的能力。

当预处理器们进入开发者的视野后，我们可以在预处理器中写各种各样的mixins、functions、variables，这极大的提高了代码的可维护性和鲁棒性，但是预处理器解决不了一个CSS的关键痛点：

CSS基本没有运行时的能力。

除了少数属性，rem、em、currentColor等，我们能使用的，都是静态的东东，在web开发中可能会面临千奇百怪的业务场景，开发时就束手无策了。

好在，CSS变量一定程度上解决了这个问题。

:root{ 
    --main-color: #4d4e53;
    --main-bg: rgb(255, 255, 255); 
    --logo-border-color: rebeccapurple; 
    --header-height: 68px; 
    --content-padding: 10px 20px; 
    --base-line-height: 1.428571429; 
    --transition-duration: .35s; 
    --external-link: "external link"; 
    --margin-top: calc(2vh + 20px);
}

CSS变量包含作用域，可以和其他变量组合，可用calc()进行计算，还暴露了钩子给JS进行操作。

相信你的眼镜，而不是数字

设计上有很多的讲究，视觉上的错觉真实存在。这儿有几个有意思的小🌰

合理使用简写

看下，以下代码是否等价？

background: red;
background-color: red;


如果只有这一行css代码，那么他们实现的效果是一致的，一个红色的背景。

但是，思考一下，当你使用background-color时，这是一个展开式属性，意味着这个属性没有办法控制其他地方的属性。你的背景未必是一个纯色red，还有可能包括其他属性值。

当然，你可以把其他展开性属性重置一遍，可能会漏掉几个；当浏览器添加了新的展开式属性，这就更让人头疼了。

所以，合理使用简写属性，是一种良好的防御性编程，可以抵御未来风险。

简写属性配合展开式属性，可以让代码更加DRY。