组件式布局

前端一个页面会有很多的css代码,若是都写在一个sass文件中,代码可能会超过百行、千行,这对后期的维护会非常困难,而页面组件化可以很好地解决这个问题。

组件的好处:可重用、可组合、可就近维护。

组件的坏处:语义化(命名难起)。

页面上每个独立的可视、可交互区域视为一个组件。

每个组件对应一个相关文件目录。

组件的独立性可以使组件相互组合。

页面是组件的容器,负责组合组件形成完整的界面。

组件有多种规则时,可以定义多种元素,组合使用。

比如:按钮

1.定义基础按钮元素。 btn_base

2.定义按钮颜色样式元素。 btn_follow

3.定义按钮尺寸元素。 btn_follow_xs

比如:发表文章的作者

发表文章的作者是由头像,作者名,文章发表时间组合而成

1.定义头像元素,这个元素会出现大小之分,圆方之分。

2.定义作者信息,有作者名和时间。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容