CSS 的重用性寫法探索

在css的構建過程中，我們經常會定義某種屬性，而這些屬性又在多處使用。如字體的大小，顏色等。那么我們怎么樣才可以最大限度的重用呢？
本討論中，列舉使用這兩個屬性（字體大小，顏色）的例子。如我們需要定義一段紅色，字體大小為14px的段落。
通常可以這樣：
html:
<p class="paragraph">這是紅色，字體大小為14px的段落</p>
css:
.paragraph{
font-size:14px;
color:red
}
效果：

這是紅色，字體大小為14px的段落

而當我們有另外一個或者幾個相同的段落（或者都是使用相同屬性：紅色，字體大小為14px的文字）時，我們只要在html中定義相同的class就可以輕松的實現。
html:
<p class="paragraph">這是另一個紅色，字體大小為14px的段落</p>
效果：

這是另一個紅色，字體大小為14px的段落

然而，當有一個藍色，字體大小同樣為14px的段落時，我們不得不重新定義一個樣式。
html:
<p class="paragraph_another">這是一個藍色，字體大小為14px的段落</p>
css:
.paragraph_another{
font-size:14px;
color:blue
}
效果：

這是一個藍色，字體大小為14px的段落

在這里，很明顯的，字體為14px這個屬性我們重復了。那么我們要怎么才可以重用這個樣式呢？
我是這樣做的：引入一個我稱之為“class拼接”的技術（這樣的用法早就用了，只不過我這樣稱呼而已）。
首先定義一個字體大小為14px的樣式
.font_one{
font-size:14px;
}
然后再定義自身的樣式：
paragraph{
color：red
}
paragraph_another{
color：blue
}
在hmtl中，我們這樣應用：
<p class="paragraph font_one">這是另一個紅色，字體大小為14px的段落</p>
<p class="paragraph_another font_one">這是一個藍色，字體大小為14px的段落</p>
效果：

這是一個紅色，字體大小為14px的段落

這是一個藍色，字體大小為14px的段落

同理，我們可以拼接其他樣式，如字體加粗。
新建一個css
.font_a{
font-weight:bold;
}
html:
<p class="paragraph font_one font_a">這是另一個紅色，加粗，字體大小為14px的段落</p>
<p class="paragraph_another font_one font_a">這是一個藍色，加粗，字體大小為14px的段落</p>
效果：

這是一個紅色，加粗，字體大小為14px的段落

這是一個藍色，加粗，字體大小為14px的段落

這樣，在其他段落中，要想得到什么樣的效果，只要在html代碼拼接相對應的class名稱即可。
這種方法的優點：在構建頁面的工程中，可以大大的提高速度，全局修改靈活，降低了css文件體積。
缺點：局部樣式修改不靈活，修改時，你需要在html代碼中刪除相對應的class名稱，或者加入唯一標識，然后在唯一標識中寫入新的樣式，去覆蓋舊的。

當修改一兩處時，尚可行，當存在大量需修改的地方時，顯然是行不通的。
  
例如：我要做到這樣的效果，怎么樣算是比較完美的方法呢？

這是另一個紅色，加粗，字體大小為14px的段落。標識符：paragraph

這是一個藍色，加粗，字體大小為14px的段落。標識符：paragraph_another

這是一個只用到加粗，字體大小為14px樣式的段落。標識符：paragraph_a

這是一個紅色，沒有加粗，字體大小為12px的段落標。識符：paragraph_b

這是一個加粗，字體大小為12px的段落。標識符：paragraph_c

方法一：求同存異：
css：
.garagaraph,
.garagraph_another，
.paragraph_a{
  font-size:14px;
  font-weight:bold
}
然后分別定義：
.garagraph,
.paragraph_b{
color:red;
}
.garagraph_another{
color:blue
}
.paragraph_c{
font-weight:bold;
}
html:
<p class="paragraph ">這是另一個紅色，加粗，字體大小為14px的段落。標識符：paragraph</p>
<p class="paragraph_another">這是一個藍色，加粗，字體大小為14px的段落。標識符：paragraph_another</p>
<p class="paragraph_a">這是一個只用到加粗，字體大小為14px樣式的段落。標識符：paragraph_a</p>
<p class="paragraph_b">這是一個紅色，沒有加粗，字體大小為12px的段落標。識符：paragraph_b</p>
<p class="paragraph_c">這是一個加粗，字體大小為12px的段落。標識符：paragraph_c</p>
方法二：預留后路，就是在拼接class時，也給設置上唯一標識，在需要修改時，根據標識符來添加新的樣式或覆蓋不要的樣式，而不需要修改html。
css：
.font_size_one{
font-size:14px;
}
.font_weight_a{
font-weight:bold;
}
.color_one{
color:blue
}
.color_two{
color:red;
}
html:
<p class="color_two font_weight_a font_size_one paragraph ">這是另一個紅色，加粗，字體大小為14px的段落。標識符：paragraph</p>
<p class="color_one font_weight_a font_size_one paragraph_another">這是一個藍色，加粗，字體大小為14px的段落。標識符：paragraph_another</p>   
<p class="font_one font_weight_a paragraph_a ">這是一個只用到加粗，字體大小為14px樣式的段落。標識符：paragraph_a</p>
<p class="color_two paragraph_b">這是一個紅色，沒有加粗，字體大小為12px的段落標。標識符：paragraph_b</p>
<p class="font_weight_a paragraph_c">這是一個加粗，字體大小為12px的段落。標識符：paragraph_c</p>
這里的命名，為什么不語義化一點？例如：color_two{color:red}（字體為紅色）可以命名為color_red{color:red}呢？
本人覺得，如果color改成blue的時候{color:blue}，顯然color_red就不合邏輯。

那么我們在實際應用中，該用那一種方法呢？歡迎大家討論！

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈