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

Question

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

Answer 1

用一个命名代表一种样式呀，相同的某些样式加上需要的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;}

Answer 2

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

Answer 3

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

Answer 4

用js动态生成dom元素

Answer 5

说下我的观点，其实我不是很常用 @陌路凡歌 的做法，因为我认为，如果很多个相同的模块(比如样式相同的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开发是另外一回事儿了...
希望能对你有所帮助。