阅读《CSS揭秘》有感（P22，连载中，敬请期待 ^_^~~）

本文链接：https://blog.csdn.net/LJinger/article/details/109359592

本文是《CSS揭秘》的读书笔记，重点探讨代码优化技巧，如减少代码重复、使用currentColor、inherit和背景图片的适配。同时，也分享了视觉设计的思考，如相信眼睛而非数字的直觉。书中的经典语录和实用技巧值得开发者参考。

摘要由CSDN通过智能技术生成

《CSS揭秘》的读者很有趣，推荐大家连带各种“序”一起看，这里摘抄其中一段我喜欢的：
在这里插入图片描述

1. 一锅乱炖

1.1 在文中，作者推荐了各种优秀的网站

查看浏览器兼容性信息：Can I Use…? （http://caniuse.com）
给无前缀代码添上前缀：CSS3，please（http://css3please.com）
等等

1.2 经典语录

抽象泄露法则：“所有重大的抽象机制在某种程度上都存在泄露的情况。”

2. 代码相关

2.1 第一章引言

2.11 尽量减少代码重复

当某些值相互依赖时，应该把它们的相互关系用代码表示出来——摘自《CSS揭秘》

下面这一段css，给按钮添加了一些效果

padding: 6px 16px;
border: 1px solid #446d88;
backgroud: #58aliner-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;

这段代码在可维护性方面存在一些问题，书中做了如下说明（仅摘抄部分，详细内容请翻阅书籍）：

首先考虑，如果想改变字号要怎么做？改变字号font-size 在以上代码中就意味着要改变行高line-height，且代码中行高没有表现出和字号的关系。在以上代码中，行高是字号的1.5倍，所以可以修改为如下：

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

做到这一步了，为什么font-size还要用绝对值呢？书中建议使用%或em，代码如下：

font-size: 125%; /* 假设父级的字号是16px */
line-height: 1.5;

接下来，书中建议…

我很赞同，但我自己没有实际应用，我总结出了以下几点原因：

font-size不习惯用%，基本照着设计图的单位，用px。
其他样式也不喜欢用%，项目中需要适配的