阿嬷都看得懂的 CSS 收整与 DRY 策略

玫瑰即使换个名字，还是同样芬芳。 －莎士比亚

欢迎各位阿嬷回到你阿嬷成为网页工程师的...等等，别走啊，我知道标题今天又是 CSS，但是我保证今天不会再介绍多如繁星、金鱼脑记不清的样式了！

咦，但是 CSS 不就是样式吗？不介绍更多样式，还要介绍什麽？

没关系，先让我们看看昨天的一段程序。

<div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块一</div>
	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px;">区块二</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块三</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块四</div>
</div>

是不是对各位阿嬷的眼睛超伤的？而且根本像是乖孙不乖，被老师罚抄课文抄 4 次，越抄越烦，越抄越火大！

对，今天就是要教各位阿嬷不用重复的方法！也就是 DRY！
.....呃，好，真的好乾。

DRY 的意思是 Don't repeat yourself，也就是不要重复抄写，不要复制贴上！因为工程师都、很、懒！不是，是生命应该浪费在美好的事物上。所以，我们应该怎麽避免重复呢？

首先，让我们观察重复的部分。在这 4 个标签中，
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">区块一</div>
红色的部分都是重复的。

再来，让我们想想，这些重复的地方，是否可能 / 应该被收整在一起呢？

我知道，这个问题乍看之下还满让人傻眼的：我们都还没介绍什麽收整的方法，怎麽会知道哪些重复的地方可能收整在一起？没关系，让我们还是先想想，这些重复的地方在干嘛？没错，是告诉浏览器有个 div 标签，然後它的样式长这样那样。

我们在更後面的文章中，会告诉大家怎麽使用脚本，让浏览器重复产生 HTML 标签，或者说操纵整个 DOM 树。在这篇文章当中，我们先来看看怎麽收整这些落落长的样式。不过，在那之前，我们先来玩个游戏。

当我说「粉红色大象」的时候，你想到什麽？你大概想到一个四只粗腿、两只长牙、一根长鼻，短尾巴短腿，粉红色的生物。

等等，我刚刚只说粉红色大象，所以你说这东西是粉红色，这合理，可是为什麽你会知道这东西有粗腿、长牙、长鼻这些属性呢？

废话，因为 大象 这个类别的东西，都有粗腿、长牙、长鼻这些属性啊！

很好，这表示，我们可以把都有某些属性的东西，全部收整到某个分类当中。问题来了，这个分类的名称，是否会影响到这个分类中的东西有哪些属性？

不，不会的。熟读莎士比亚的阿嬷会说：

玫瑰即使换个名字，还是同样芬芳。

当我告诉你，我从现在开始，把会跳的兔子统统称作「嘎法盖」，然後我又说到「粉红色的嘎法改」的时候，你就会知道我在指 会跳的粉红色的兔子；不管你之前是否知道，又大家是否认同「嘎法盖」指的就是会跳的兔子。

因此，我们可以告诉浏览器，从现在开始，某个分类里面的东西都有某些属性，而且我们把这个分类任意武断地叫作某个名字。从此以後，浏览器只要看到某个元件属於这个分类，就会知道这个元件有那些属性。

以上面那 4 个区块的例子而言，我们可以告诉浏览器，这 4 个区块都属於 gavagai 这个分类，而在 gavagai 分类中的东西，都有以下这些属性：

	margin:2px;
	height:100px; 
	width:100px; 
	background-color:red; 
	color:white; 
	text-align:center; 
	line-height:100px;

等等，可是区块二的颜色分明是紫罗兰色啊！没关系嘛，平常大象也是灰色啊，你刚刚不也知道粉红色大象是粉红色的？我就之後再告诉浏览器，区块二是紫罗兰色的 gavagai 就好罗！

那麽，我们应该怎麽告诉浏览器，这 4 个区块都属於 gavagai 这个分类呢？很简单，只要在标签中，加上 class 字样，并且後面加上等号，再加上双引号，双引号内加上类别名称就可以了。因此，写起来会是像这样：

<div class="gavagai">区块一</div>

是不是清爽超多呢！

等等，我们确实是把 CSS 样式收整出来了没错，但是我们要怎麽告诉浏览器，这些被收整出来的样式，属於哪个标签呢？是直接把 gavagai 这个字样，放在所有收整出的样式前面吗？

这就留待我们明天介绍 CSS 选择器的时候，再深入讨论罗！