软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > CSS 的重用性写法探索

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就不合逻辑。

那么我们在实际应用中,该用那一种方法呢?欢迎大家讨论!

    相关阅读
    栏目导航
    推荐软件