好程序员web前端学习路线分享css模块化方案
好程序员web前端学习路线分享css模块化方案,这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下。 css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案。 oocss 面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容。 名词解释 1、分离结构和外观:增加可重复的设计单元,同时去推进产品和ui对这方面的思考,比如下面的css使用时对象模式的命名和模块化规则。 2、分离容器和内容:指的是样式的使用不以元素位置唯一匹配,在任何位置你都可以使用这个样式,如果你不适用这个样式,会保持默认的样式。 实例 // dom结构 <div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">标题</div> </div> <div class="toogle-details "></div> </div> // 模块的标记 唯一标识 .toggle{ } // 皮肤样式的写法,如果基本结构是一样的,你可以用complex的一个辅助样式 .toggle.simple{ } // 是否做嵌套写法 相信很多预处理器的部分会支持嵌套 然后很多人会这样写,不被推荐的