写相似的CSS页面、HTML页面如何保证页面结构的复用性?

Suzy
  • 63

写相似的CSS页面、HTML页面如何保证页面结构的复用性?

回复
阅读 2.5k
5 个回答

用一个命名代表一种样式呀,相同的某些样式加上需要的class名字就行了。如

.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.p1{padding:1px;}
.pl1{padding-left:1px;}
.pt1{padding-top:1px;}
.pr1{padding-right:1px;}
.pb1{padding-bottom:1px;}

可以参考bootstrap等css框架的做法

css样式的公用性可以像楼上的做法,html结构的公用性:
原始的做法:模板引擎,如artTemplate
现在流行的做法:vue是具有代表性的页面模块化的框架,值得研究

用js动态生成dom元素

说下我的观点,其实我不是很常用 @陌路凡歌 的做法,因为我认为,如果很多个相同的模块(比如样式相同的div)用到了pd1,当这个模块调整为pd2时,需要改多处地方。
当然css模块化还是有必要的,比如一些公用css,举个例子,页面中有用到section,那么section的基础样式可以提取出来,例如

.section {
  padding: 120px 30px;
  border: 1px solid #fff;
}

我习惯将padding之类的写到具体的class类中,如果调整padding为20px,那么不用去修改每一个用到pd20的地方了。
一般的项目,可以直接css搞起来,当然,如果页面过多的话,可以试试sass等css预处理器,可以将一些网页常用变量提取出来,比如:

$h-green: #7ccbb1;

这样当某一处的配色需要换的话,只需要更改一处即可。
另外可以将css分模块建立,如

base.scss
common.scss
homepage.scss
article.scss
main.scss

这里只是简单的举个例子,具体实施,还需自己研究研究。
另外可以配合gulp打包构建工具,提高效率。
有人可能会说,又添加了一堆预处理器,构建工具,学习成本增加了,我想说,能提升开发效率的事儿,为啥不学呢?
当然,用Vue.js,React.js,Angular开发是另外一回事儿了...
希望能对你有所帮助。

你知道吗?

宣传栏