写相似的CSS页面、HTML页面如何保证页面结构的复用性?
说下我的观点,其实我不是很常用 @陌路凡歌 的做法,因为我认为,如果很多个相同的模块(比如样式相同的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
开发是另外一回事儿了...
希望能对你有所帮助。
用一个命名代表一种样式呀,相同的某些样式加上需要的class名字就行了。如