《CSS揭秘》笔记（一）

时间 2019-11-09

标签 CSS揭秘笔记栏目 CSS 繁體版

原文原文链接

前言

咱们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug。现在的挑战是，在保证 DRY ① 、可维护、灵活性、轻量级而且尽量符合标准的前提下，把咱们手中的这些CSS特性转化为网页中的各类创意。这正是这本书将要呈现的内容。——引用自前言css

①DRY 是 Don’t Repeat Yourself 的首字母缩写，意思是不该该重复你已经作过的事。它是一种广为流传的编程理念，旨在提高代码某方面的可维护性：在改变某个参数时，作到只改尽可能少的地方，最好是一处。强调 CSS 代码的 DRY 原则是一个贯穿本书的主题。DRY 的反面是 WET，它的意思是 We Enjoy Typing（咱们喜欢敲键盘）或 Write Everything Twice（一样的代码写两次）。html

全书都是之前言这段话为基础，根据不一样场景下的各类问题给出更有创意的实现方案，一共包含了47篇攻略，按主题分为 7 章，每篇攻略至少会附上一个在线示例，在线示例必定不能错过，对案例的理解有很大帮助。web

虽然建议是做为进阶阅读，可是每篇攻略都贴心的提供了背景知识提示，无论可否彻底看懂，仍然能够开阔思路。编程

ps：有兴趣想看这本书的能够联系我分享pdf电子版（仅供学习使用，仍是呼吁你们支持正版书籍），笔记基本就是摘要==巩固知识，阅读完整书籍才能达到更好的学习效果。浏览器

第一章引言

Web 标准：是敌仍是友

标准的制定过程

编辑草案（ED）
首个公开工做草案（FPWD）
工做草案（WD）
候选推荐规范（CR
提名推荐规范（PR）
正式推荐规范（REC）ide

浏览器兼容性

推荐如下网站查证浏览器对CSS属性的支持状况：函数

浏览器前缀

经过在名称前面加上浏览器特有的前缀，就能够自由地尝试使用不一样浏览器实现的一些实验性的（甚至是私有的、非标准的）特性，工做组会将收到的反馈吸取到规范之中，而且逐渐完善该项特性的设计。然而这种方式产生了不少弊端，例如随着规范的修改要来回打补丁修改，代码冗余不利于维护等。工具

最近，浏览器厂商已经不多之前缀的方式来实验性地实现新特性了。取而代之的是，这些实验性特性须要经过配置开关来启用，这能够有效防止开发者在生产环境中使用它们，由于你不能要求用户为了正确地浏览你的网站而去修改浏览器设置。固然，这会致使一个后果：尝试这些实验性特性的开发者会减小；但咱们仍然会获得足够多的反馈，甚至是更高质量的反馈（你可能会质疑），同时还避免了浏览器前缀的全部缺点。不过咱们还须要很长的时间，才能从浏览器前缀所引起的涟漪效应中解脱出来。布局

CSS 编码技巧

尽可能减小代码重复

代码可维护性的最大要素是尽可能减小改动时要编辑的地方，当某些值相互依赖时，应该把它们的相互关系用代码表达出来。例：line-height: 1.5;。post

代码易维护 vs. 代码量少。

currentColor：它是从SVG 那里借鉴来的一个特殊的颜色关键字。它没有绑定到一个固定的颜色值，而是一直被解析为 color，这个特性让它成为了 CSS 中有史以来的第一个变量。

inherit （继承）：很容易被遗忘，能够用在任何 CSS 属性中，并且它老是绑定到父元素的计算值（对伪元素来讲，则会取生成该伪元素的宿主元素）。

tips：推荐使用 HSLA 而不是 RGBA 产生半透明的白色，由于它的字符长度更短，敲起来也更快，这归功于它的重复度更低。

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

人的眼睛并非一台完美的输入设备，有时候精准的尺度看起来并不精准，而咱们的设计须要顺应这种误差。

在视觉设计领域广为人知的例子：咱们的眼睛在看到一个完美垂直居中的物体时，会感受它并不居中，实际上，咱们应该把这个物体从几何学的中心点再稍微向上挪一点，才能取得理想的视觉效果。

关于响应式网页设计

每一个媒体查询都会增长成本，用对了它就是利器。

咱们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸。当网页自己的设计足够灵活时，让它变成响应式应该只须要用到一些简短的媒体查询代码。

若是你发现本身须要一大堆媒体查询才能让设计适应大大小小的屏幕，那么不妨后退一步，从新审视你的代码结构。由于在全部的状况下，响应式都不是惟一须要考虑的问题。

如下建议可能会帮你避免没必要要的媒体查询：

使用百分比长度来取代固定长度。若是实在作不到这一点，也应该尝试使用与视口相关的单位（ vw 、 vh 、 vmin 和 vmax ），它们的值解析为视口宽度或高度的百分比。

em：相对于当前对象内文本的字体大小。
rem：r是"root"的缩写，意思是 1rem 等于根元素的字体大小；大部分状况下，根元素就是<html>元素。rem 也能够用基于 html 根元素字体大小的 rem 做为整个网格布局或者UI库的大小单位.container { width: 70rem; // 70 * 14px = 980px}。
vw：1vw 等于 1/100 的视口宽度。
vh：1vh 等于 1/100 的视口高度。
vmin 和 vmax：是 vw 和 vh（视口高度和宽度）二者的最小或者最大值。
ch：单位一般被定义为数字 0 的宽度。
ex：定义为当前字体的小写x字母的高度或者 1/2 的 1em。不少时候，它是字体的中间标志。
pc：1pc 等于 12 点。
pt：1pt 等于 1/72 英寸。

当你须要在较大分辨率下获得固定宽度时，使用 max-width 而不是 width，由于它能够适应较小的分辨率，而无需使用媒体查询。
不要忘记为替换元素（好比 img 、 object 、 video 、 iframe 等）设置一个 max-width，值为 100%。
假如背景图片须要完整地铺满一个容器，无论容器的尺寸如何变化，background-size: cover 这个属性均可以作到。可是，咱们也要时刻牢记——带宽并非无限的，所以在移动网页中经过 CSS 把一张大图缩小显示每每是不太明智的。
当图片（或其余元素）以行列式进行布局时，让视口的宽度来决定列的数量。弹性盒布局（即 Flexbox）或者 display: inline-block 加上常规的文本折行行为，均可以实现这一点。
在使用多列文本时，指定 column-width （列宽）而不是指定 column-count（列数），这样它就能够在较小的屏幕上自动显示为单列布局。

合理使用简写

合理使用简写是一种良好的防卫性编码方式，能够抵御将来的风险。

当咱们要明确地去覆盖某个具体的展开式属性并保留其余相关样式，那就须要用展开式属性。

展开式属性与简写属性的配合使用，可让代码更加 DRY。

我应该使用预处理器吗

预处理器为 CSS 的编写提供了一些便利，好比变量、mixin、函数、规则嵌套、颜色处理等。若是使用得当，它们在大型项目中可让代码更加灵活，而 CSS 自身在这方面确实有很大局限。只要咱们在代码健壮性、灵活性和 DRY 方面有追求，就会感觉到 CSS 在这方面的局限。不过，预处理器也不是天衣无缝：

CSS 的文件体积和复杂度可能会失控。即便是简洁明了的源代码，编译后也可能会变成一头巨兽。
调试难度会增长，由于你在开发工具中看到的 CSS 代码并非你写的源代码。不过这个问题已经大大好转了，由于已经有愈来愈多的调试工具开始支持 SourceMap。
预处理器在开发过程当中引入了必定程度的延时。尽管它们一般很快，但仍然须要差很少一秒钟的时间来把你的源代码编译成 CSS，而你不得不等待这段时间才能预览到代码的效果。
每次抽象都必然会带来更高的学习成本，每当有新人加入到咱们的代码库中，这个问题都会重演。
抽象泄漏法则：“全部重大的抽象机制在某种程度上都存在泄漏的状况。”预处理器是由人类写出来的，就像全部由人类写出来的大型程序同样，它们有它们本身的 bug。这些 bug 可能会潜伏好久，由于咱们不多会怀疑预处理器的某个 bug 才是咱们 CSS 出错的幕后元凶。
还可能致使不自觉地“依赖”和“滥用”。在某些时候，预处理器并没必要要，好比在小型项目中；或者在将来，说不定预处理器最受欢迎的那些特性都被加入了原生 CSS 中。为了不可能发生的“依赖”或“滥用”，在引入预处理器的问题上须要冷静决策，不该该在每一个项目一开始时就不动脑筋顺着惯性来。

已经有不少受预处理器启发的特性都已经以各类方式融入到原生 CSS 中了，原生特性一般比预处理器提供的版本要强大得多，例如：calc() 函数和 color() 函数。

掘金：《CSS揭秘》笔记（一）

博客园：《CSS揭秘》笔记（一）