当前位置: 首页 > Web前端 > CSS

程序员web前端学习路线分享css模块化方案

时间:2023-03-30 16:58:00 CSS

程序员web前端学习路线分享css模块化方案,本文主要介绍css模块化方案,css模块化方案可能和js一样多,下面是一个简单介绍几个主要的模块方案,很有实用价值,有需要的可以参考。css的模块化解决方案可能与js一样多。以下是几个主要的模块化解决方案。OOCSS面向对象的规则,主要原则有两条:结构与外观分离,容器与内容分离。名词解释1.结构与外观分离:增加可重复的设计单元,同时促进产品和ui在这方面的思考,比如下面使用css时对象模式的命名和模块化规则。2、容器与内容分离:指的是样式的使用并不唯一匹配元素的位置。您可以在任何位置使用此样式。如果您不应用此样式,将保持默认样式。示例//dom结构title

//模块的唯一标识mark.toggle{}//皮肤样式的写法,如果基本结构相同,可以使用复杂的辅助样式。toggle.simple{}//是否做嵌套写法,相信很多预处理器部分都会支持嵌套,很多人会这样写,不推荐toogle{.toogle-control{}.toogle-details{}}//事实上,你会这样组织吗?不是很推荐这样会降低查询效率吗?如果能确认唯一性,其实可以直接写。toogle{}.toogle-control{}.toogle-details{}smacsssma和oocss有很多相同点,但也有很多不同点,主要是样式的分类。它们是:基础、布局、模块、状态和主题。基础可以应用于任何位置。我也叫全局样式布局,主要用来实现不同特性的布局,提高布局的复用率。模块设计中的模块化可以是一个重复使用的单元,一般是dom+css的耦合绑定。状态描述了模块在特定状态下的布局或特殊性能。在dom结构不变的情况下,可以通过css的换肤来修改样式。与状态相比,主题更加定制化。我们会为一些特殊的模块设置主题,包括一系列的颜色、大小、交互等,用于重度设计和参数化设计。case//dom结构Title和oocss相比,大部分设计思路是一样的,以一个class作为css的作用域(作用域是两个限制,1不满足场景与场景匹配时禁止使用2),另一个区别是皮肤和状态的书写规则不同。Bembem是用块、元素、修饰符来写样式的思想。它不涉及具体的css结构,只是建议你如何命名css。case//dom结构Title说明1.块级:所属组件的名称2.元素:组件中元素的名称3.装饰符号:与元素修饰相关的任何类有这种命名方式的缺点。样式名会很长,但实际上在smacss和oocss中一定程度上会用到。命名非常语义化。当我们不知道模块的时候,我们可以根据样式名推导出对应的结构可能是怎样的。选择合适的解决方案无论采用何种解决方案,关键是哪种方案最适合团队。我们目前的方法是:bem和smacss整合的方式。