|
在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就不合逻辑。
那么我们在实际应用中，该用那一种方法呢？欢迎大家讨论！ （编辑：武汉站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
