免费AI编程助手
CSS 编码技巧
原文出处：http://www.w3cplus.com/css3/css-secrets/css-coding-tips.html
缩简代码
在软件开发过程中，保持代码的简洁和可维护性是最大的挑战，对于 CSS 来说，同样如此。实际上，可维护代码的一个重要特性就是要缩简需求变化时所需修改的代码量。假设放大一个按钮需要对十处代码做出修改，那么你就有可能遗漏其中的一些细节，如果这些代码本来就不是你写的，那么就更有可能发生这种疏漏。即使需要修改的细节显而易见，即使你准确地找到了这些细节，那么你也在无形中浪费了大量的时间——这些时间本该有更大的创造力。
此外，这并不只是应对未来的需求变化。可扩展的 CSS 在完成首次编写后，只需要用少量代码创建适当的变量，那么进行重写和覆盖时所需的代码量就会很少。下面让我们来看一个例子。
请先看一下下面的 CSS，它被用来美化下图所示的按钮：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-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;这段代码在可维护性上有几点问题，让我们来修改一下。首先看到的就是字体的单位。如果我们想要更改字体大小（比如为了创建更大、更显眼的按钮），那么就需要同时修改行间距，因为它们在这里使用的都是绝对值。此外，这里的行间距并不能有效地与字体大小关联起来，以至于我们需要手动计算各种字体大小下的行间距。当属性值相互关联时，应该在代码中体现它们的关联性。对于上述的代码，行间距是行高的 150%，所以，使用下面的代码将更具可维护性：
font-size: 20px;
line-height: 1.5;既然我们都写成了这样，为什么还要给字体大小指定一个绝对数值？虽然绝对数值易于使用，但是每次需求变化时你就需要重新修改，比如现在我们想让父级字体更大一些，那么就需要在样式表中使用绝对数值修改每一条相关的样式规则，显然这是不可取的。更好的方式是使用百分比或者类似 em 的单位：
font-size: 125%; /* 假设父级字体为 16px */
line-height: 1.5;现在，如果我修改了父级字体大小，那么按钮也会相应的变大。不过，按钮看起来和之前不大一样了,如下图所示：
这是因为其他的特效还是和之前一样袖珍，仍然不具有伸缩性。只需要使用类似 em 的单位，我们就可以将其他特效变成可伸缩的，最终所有的属性值都关联到了字体大小上。至此，我们只需修改字体大小就能控制整个按钮的大小了。
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;现在，按钮看起来很像是原始版本的放大版:
在这里，我们想要字体大小与父级字体相关联，所以使用了 em。在某些情况下，你想要让字体和根节点的字体相关联（比如<html> 节点的字体），但是这时使用 em 就会让计算变得非常复杂。此时，最好使用 rem 单位。虽然“相关性”在 CSS 中很重要，但你关联前需要考虑下什么元素需要被关联在一起。
请注意，在某些属性上我们仍然使用了绝对数值。对于按钮的哪些效果需要可伸缩，哪些不需要可伸缩这一问题，应该主观判断而不能客观要求。比如此处的按钮，不论按钮如果缩放，我们始终要求它的边框粗细为 1px。
不过，通常我们所需要修改的不只是按钮的尺寸。对配色的修改也是一个很重要的方面。比如，如果我们想要创建一个红色的“取消”按钮，或者是绿色的 “OK” 按钮又该如何做呢？一般来说，我们至少需要重写四条样式（border-color，background，box-shadow，text-shadow）。不用多说你也会理解，重新计算主体颜色（#58a）的亮度、理清所需颜色的亮度，将是一份非常麻烦的事情。此外，如果我们将按钮添加到了非白色背景的页面中，又该如何修改呢？实际上，上述按钮的灰色阴影只在白色背景下才会效果明显。
一个简单的修改方式是，对主体颜色的亮度叠加半透明的黑白色：
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height: 1.5;提示：使用
HSLA而不是RGBA表示半透明白色的好处在于，由于无需重复，它的字符更少，编写的更快。
接下来，我们可以使用不同的颜色重写背景颜色了,如下图所示：
更多建议：