前言

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

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

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

虽然建议是作为进阶阅读，但是每篇攻略都贴心的提供了背景知识提示，不管能否完全看懂，仍然可以开阔思路。

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

第一章 引言

Web 标准：是敌还是友

标准的制定过程

  1. 编辑草案（ED）
  2. 首个公开工作草案（FPWD）
  3. 工作草案（WD）
  4. 候选推荐规范（CR
  5. 提名推荐规范（PR）

  6. 正式推荐规范（REC）

    浏览器兼容性

    推荐以下网站查证浏览器对CSS属性的支持情况：

浏览器前缀

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

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

CSS 编码技巧

尽量减少代码重复

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

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

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

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

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

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

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

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

关于响应式网页设计

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

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

如果你发现自己需要一大堆媒体查询才能让设计适应大大小小的屏幕，那么不妨后退一步，重新审视你的代码结构。因为在所有的情况下，响应式都不是唯一需要考虑的问题。

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

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

  1. em：相对于当前对象内文本的字体大小。

  2. rem：r是"root"的缩写，意思是 1rem 等于根元素的字体大小；大部分情况下，根元素就是<html>元素。rem 也可以用基于 html 根元素字体大小的 rem 作为整个网格布局或者UI库的大小单位.container { width: 70rem; // 70 * 14px = 980px}。

  3. vw：1vw 等于 1/100 的视口宽度。

  4. vh：1vh 等于 1/100 的视口高度。

  5. vmin 和 vmax：是 vw 和 vh（视口高度和宽度）两者的最小或者最大值。

  6. ch：单位通常被定义为数字 0 的宽度。

  7. ex：定义为当前字体的小写x字母的高度或者 1/2 的 1em。 很多时候，它是字体的中间标志。

  8. pc：1pc 等于 12 点。

  9. 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揭秘》笔记（一）

《CSS揭秘》笔记（一）的更多相关文章

  1. python程序设计语言笔记 第一部分 程序设计基础

    1.1.1中央处理器(CPU) cpu是计算机的大脑,它从内存中获取指令然后执行这些指令,CPU通常由控制单元和逻辑单元组成. 控制单元用来控制和协调除cpu之外的其他组件的动作. 算数单元用来完成数 ...

  2. C程序设计语言笔记-第一章

     The C Programming language notes 一 基础变量类型.运算符和判断循环         char                 字符型  character      ...

  3. 北京大学Cousera学习笔记--6-计算导论与C语言基础--计算机的基本原理-认识程序设计语言 如何学习

    1.是一门高级程序语言 低级语言-机器语言(二进制) 汇编语言-load add save mult 高级语言:有利于人们编写理解 2.C语言的规范定义非常的宽泛 1.long型数据长度不短于int型 ...

  4. MOOC 编译原理笔记（一）：编译原理概述以及程序设计语言的定义

    编译原理概述 什么是编译程序 编译程序指:把某一种高级语言程序等价地转换成另一张低级语言程序(如汇编语言或机器代码)的程序. 高级语言程序-翻译->机器语言程序-运行->结果. 其中编译程 ...

  5. 20145213《Java程序设计学习笔记》第六周学习总结

    20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

  6. javascript高级程序设计阅读笔记（一）

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  7. 《c++程序设计》笔记

    本文是学习谭浩强老师的<c++程序设计>后的笔记. 1.概述 c++是贝尔实验室在c语言的基础上发展而来,与c兼容.用c语言写的程序可以不加修改用于c++.从c++的名字可以看出它是c的超 ...

  8. 003-scanf函数使用和表达式-C语言笔记

    003-scanf函数使用和表达式-C语言笔记 学习目标 1.[掌握]输入函数scanf的基本使用方法 2.[掌握]输入函数scanf运行原理和缓冲区理解 3.[掌握]算术运算符和算术表达式的使用 4 ...

  9. 操作系统和程序设计语言的API使用的字符编码分析

     1.Java的运行环境中,String是什么编码? 使用java做程序设计语言,字符编码是和jvm相关的,和操作系统无关. java默认的编码是jvm在安装的时候就确定了的,它是根据你的系统的环境确 ...

  10. 扩展《C程序设计语言》练习2-3程序通用性

    最近开始自学C语言,在看K&R的<C程序设计语言>.练习2-3要求写一个函数,将输入的十六进制数字字符串转换成与之等价的整数值,配套答案没有扩展程序的通用性,所以我就稍微改造改造. ...

随机推荐

  1. Linux内核及分析 第八周 进程的切换和系统的一般执行过程

    学习笔记: 一.进程调度与进程调度的时机分析 1.不同类型的进程有不同需求的调度需求: 第一种分类: —I/O-bound:频繁的进行I/O,通常会花费很多时间等待I/O操作的完成 —CPU-boun ...

  2. Linux基础实践

    Linux基础实践 1.1 应用安装 要求:掌握软件源的维护方法,配置系统使用软件源镜像.掌握通过软件源来查找,安装,卸载,更新软件的方法 备份原地址列表文件:sudo cp /etc/apt/sou ...

  3. 20135218 实践四 ELF文件格式分析

    一 :概述 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目标文件)格式主要三种: (1)可重定向文件:文 ...

  4. 20135323符运锦----LINUX第二次实践：内核模块编译

    Linux实践二--模块 一.知识点总结 ①Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率 ...

  5. <软件体系结构>实验框架选择及其说明

    一.框架选择 本次实验,我所采取的框架是SSH框架.那么首先,我想简单的说明一下SSH框架,一方面给自己复习一下知识,另一方面也能使自己在以后看这篇博客的时候不至于太费力. SSH不是一个框架,而是S ...

  6. github链接

    github链接:https://github.com/bjing123     test1:https://github.com/bjing123/test-/blob/master/test1.t ...

  7. MyEclipse项目里面出现红叉的解决方案？

    一般出现在从别处import的项目上,只有项目文件夹上有红叉,其他地方都正常,现总结个人的几个解决方案:   有几种可能: 1,编码设置是否一致,也即是你项目原来的编码和现在eclipse用的默认编码 ...

  8. SpringMVC-RESTRUL___CRUD知识点总结

    RESTful风格 <!-- 携带surveyId去后台 --><!-- RESTFUL风格:/xxx/23 --><!-- 接收方式:@PathVariable注解 - ...

  9. 对TCP重传的进一步认识

    http://blog.sina.com.cn/s/blog_4d276ac901011ee7.html ——TCM项目所得 一.看图说话 1.基于套接字的TCP服务器/客户端程序流程 2.TCP三次 ...

  10. PAT 1018 锤子剪刀布

    https://pintia.cn/problem-sets/994805260223102976/problems/994805304020025344 大家应该都会玩“锤子剪刀布”的游戏:两人同时 ...