CSS模块化(五) CSS的设计模式原则之一：聚合/组合原则

最新推荐文章于 2022-07-25 22:31:15 发布
原创 最新推荐文章于 2022-07-25 22:31:15 发布 · 3.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS #CSS模块化 #继承 #模块化 #面向对象编程

本文探讨了CSS模块化中的聚合/组合原则，通过比较方案一、方案二和方案三，阐述了如何通过组合避免代码冗余和类爆炸。建议在CSS设计中多使用组合，以提高代码的可维护性和重用性，减少类的数量。

5. CSS的聚合/组合原则--挂多个class还是新建

CSS里也包含了设计模式的6大原则，今天讲讲聚合/组合原则--多用组合，少用继承

假设有如图3-1所示的模块。

 

 

图3-1 三个简单模块

我们如何设置它的CSS呢？方案一如代码清单3-11所示。

 

方案一可以实现我们想要的效果，但它非常冗余，“.numberList1”、“.numberList2”和“.numberList3”的CSS设置相同，“.numberList1 li”、“.numberList2 li”和“.numberList3 li”有部分CSS一致。我们对它们进行改进，产生方案二，如代码清单<

最低0.47元/天 解锁文章
一些CSS的设计原则浅谈
12-13
相信大多数人都有过关于CSS的痛苦经历，从我加入公司到现在，不到两年的时间里，听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题，为什么很多人觉得CSS很难写，如何才能让其他人更优雅的写CSS。在Code Review的时候，我渐渐的发现了问题所在，其实很多人已经掌握了丰富的CSS知识，但却不知道如何分组属性写成class。最后只好在需要改变样式的元素上随意起个名字做class然后把所有要写的属性丢进这个class里，如果优先级不够，再把前面的选择器都加上。结果就是CSS代码不断堆积，重复和冗余不断增多，维护也变得举步维艰。 问题找到了，但如何解决呢，虽然我在项目组内
css模块化方案
09-22
主要介绍了css模块化方案，css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案，非常具有实用价值，需要的朋友可以参考下
htmlcssCSS+HTML的模块化设计
11-24
htmlcssCSS+HTML的模块化设计htmlcssCSS+HTML的模块化设计htmlcssCSS+HTML的模块化设计
css模块化
菜鸟的博客
06-14 1474
设计原则 a、可复用能继承要完整 b、周期性迭代 设计方法 a、先整体后部分再颗粒化 b、先抽象再具体 a、可复用能继承要完整 例图1 比如拿到这个设计图，来思考css的模块设计。 这两个 可能觉得这两个地方可做模块。但是翻其他地方，这种看上去长得很相似，功能点小，其他地方又找不出有用这种样式的，就不能叫做可复用，所以不要拆除出来。 而单看字体，左黑右红，这...
CSS设计的一些原则
雾塔晨钟
01-22 465
几个月来，也做了不少CSS设计的工作，都是国外的客户，从一开始的啥都不懂，到现在的回头客不少，也算是有点心得了吧，跟大家分享分享。 大原则 DIV布局因为表格布局会使浏览器的兼容性产生很大问题，比如在手机，掌上电脑用户浏览表格布局会一片混乱，所以最好使用DIV+CSS的布局，事实上我所有的客户，都是这样要求我的。兼容性对于一个好的CSS设计来说，必须保证所有的主流浏览器都能正常地显示，IE6+...
线报主题商业源码：PHP/Java毕业设计实训系统
“实训商业源码-线报主题-毕业设计.zip”这一文件标题明确指向一个用于教学实践或学生毕业设计的完整商业级网站系统源代码压缩包，其核心主题为“线报”。所谓“线报”，在互联网语境中通常指用户自发分享的优惠信息...
基于Prism的WPF模块化MVVM框架设计源码
最新发布
09-25
Prism是一种设计模式，特别是在Microsoft平台下，它通常指代Prism库，该库支持MVVM设计模式，这是一种现代软件架构模式，可以将用户界面(UI)与业务逻辑分离，使代码更加清晰和易于维护。Prism框架提供了一系列工具和...
PoP组件模型：基于模块化架构的组件设计
在现代软件开发中，模块化架构已成为构建可维护、可扩展和高内聚低耦合系统的重要设计范式。标题“component-model：[只读] PoP的组件模型，基于组件的体系结构基于该模型”所描述的内容正是围绕这一核心思想展开的...
ph-wp-aggregator：JavaScript聚合工具支持未来CSS集成
ph-wp-aggregator 是一个专为 WordPress 平台设计的前端性能优化插件，其核心功能在于“聚合JS，也许也有一天CSS”，即通过将多个 JavaScript 文件合并成一个或少数几个文件来减少 HTTP 请求次数，从而提升网页加载...
css设计原则——多用组合，少用继承（来自《编写高质量代码-web前端开发修炼之道》）...
weixin_34365635的博客
11-17 118
组合的思路就是将一个复杂的类分解成容易产生变化的部分和稳定的部分，将容易变化的部分拆分出去，每一种可能的变化设计成一个个单独的类。 实现样式时采取挂多个class的方式。添加和删除class的js代码如下： function addClass(node,str){ if(!new RegExp("(^|\\s+)"+str).test(node.class...
CSS代码组合和嵌套
12-03
CSS的组合和嵌套 CSS组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 比如，你有如下的代码： h2 { color: red; }.thisOtherClass { color: red; }.yetAnotherClass { color: red; } 则你可以这样写： h2, .thisOtherClass, .yetAnotherClass { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间. CSS嵌套 CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。（或者
前端学习之路之css模块化设计
weixin_33712881的博客
03-21 251
css模块化设计 1. 设计原则 可复用能继承完整 周期性迭代 1) 可复用能继承完整 如上图,如果我们对该进行css模块抽象,大家会怎么分块呢?有的会说右边两个可以分一块，因为字们长得很像。还有的会想'下载APP送888元礼包'与'打白条享免息'可以分为一个模块，因为它们前后都 是前黑色后白。还有的会想每个图片可以做成一个分块。 以上这些都不太适合,比如第一种想法,两个可以分一块...
从css谈模块化
梦空间
01-06 1535
目录目录 自述 前言 背景 复用 规范 框架 模块 元件 重构common 模块 设计原则 继承 状态 总结 预告自述　　看到好的文章就喜欢转载收藏一波，这会看了一篇《从css谈模块化——jack_lo》的文章，文章所述内容跟自己此前的很多想法都有不谋而合、思想共鸣之处（你就吹吧你~）。本人此前也没有学习或参考过类似的CSS模块化的文章，纯粹是自己怎么乐意怎么写的状态，实在是惭愧于自己此前写过的代码
CSS 模块化
weixin_47667133的博客
01-14 586
CSS 模块化的三种解决方案： CSS 命名约定 BEM规范（很早以前） BEM — Block Element Modifier 依旧使用 CSS，使用 JS 编译原生的 CSS 文件，使其具备模块化的能力 CSS-Modules 彻底抛弃 CSS，使用 JS 写 CSS 规则，并内联样式 CSS-IN-JS 1. CSS Modules 方案 CSS Modules 既不是官方标准，也不是浏览器的特性，而是在构建阶段对 CSS 类名选择器限定作用域的一种方式。 1.1 CSS Modu.
CSS模块化(六) 模块化设计
hacke2' Blog
03-25 6366
6. 模块化设计 6.1 样式的作用域──页面重构中的模块化设计（一） 模块化设计我已经提过很多了，都是跟模块化相关的，不过之前一直没有讲到具体实现方面的内容，只是一些思维。这次重点讲一下实现方面的内容，权当到目前为止我对模块化的一些总结整理。 要做好模块化，我觉得理解好样式的作用域是很重要的。写过程序的同学应该都知道，变量是有作用域的（不知道的同学自己去问谷歌，这里就不作解释了），样式的定
CSS-模块化
natsu-cc的博客
05-06 1510
前言：
CSS模块化方案
文摘资讯
07-25 320
1.1 CSS 命名方法通过人工的方式来约定命名规则BEM是一种典型的 CSS 命名方法论,BEM的命名规矩就是block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名OOCSS（Object-Oriented CSS）即面向对象的 CSS，它借鉴了 OOP（面向对象编程）的抽象思维，主张将元素的样式抽象成多个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值