前端css代码优化之路

以前在写一些静态页面的时候,不管三七二十八,拿到页面抄起键盘就是一顿乱扣,先把样式写出来在说?这时候经验丰富的老司机可能就要出来教育教育你了。

最近在做一个巨大的项目,让我很烦恼,各种sass页面巨多,于是乎,我就把基本相同的页面的scss 写在了同一个文件里,以为这样就可以省却重复的代码,的确可以省代码,但事实是,当我需要修改某个页面的某块样式的时候 ,就有点悲剧了,难找。

所以每个页面对应一个自己的sass文件是非常有必要的。

那么我们该如何避免冗余的scss代码呢?

我们在写页面的时候,可以先将每个页面具体划分成几个模块,可能在划分模块的时候我们会发现,嚯!有好多模块都类似,甚至相同,强迫症的人 应该都不想写俩遍相同的代码,这个时候我们应该想到一个叫做“ 组件 ” 的关键词。

有些小伙伴可能用过bootstrap 里面就组件的概念, 那我们就可以把相同的地方都提取出来 作为component ,可能在这个组件里面,我们又用到了很多的元素,比如 button 、甚至还有比较小的组件 author 嵌套在里面。 曾经一度以为一个组件就是包罗万象的,根本没有去细化。

还有在大的项目中可能会用到很多的组件, 我们可以将component进行分类,将类似作用的component装进同一个文件夹,方便查找。

在命名方面,可以将通用的component 定义成通用类名,以后不管在哪个项目中用到,都不会觉得这个名字跟这个这个模块不匹配。

日记本

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

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