css - 一个元素中同时处理两个css框架的最佳攻略

标签 css twitter-bootstrap web css-frameworks cascade-framework

假设我正在从事一个 SPA 元素,该元素具有两个不同的 CSS 框架,并且它们之间必须共存:一个“新的和新鲜的”框架和另一个“旧的和痛苦的”框架。我们网络应用程序的每个模块都应该使用新的 CSS 框架来完成,但是旧框架有如此激进的规则,覆盖了我们新框架的一些基本规范化/重置规则并影响了新的 css。一个例子:

旧框架.css

// It's a stupid thing, but in this example this code will modify your new 
//framework because doesn't add 'color:black' to define the basic style 
// again.
body { color: red }; 

我考虑过不同的解决方案,但没有一个适合我:

  • Use css namespacing for the new framework .避免修改旧样式很好,但是如果您有一个新模块,其中包含一个与旧 css 一起工作的模块中的新 css 怎么办?这个新模块将包含很多 css bin。

  • 创建一个巨大而疯狂的 css“规范化”文件,它删除了您的新框架不需要的所有 css 规则。你的旧 css 框架越大,你必须添加更多的规则来删除以前的样式。这对“恢复”“初始”浏览器样式的网络性能产生了巨大的影响。

  • 两者的结合:新框架具有 css 命名空间,旧框架在文件末尾包含“规范化”样式。这是目前我能在我的特定案例中找到的最佳选择,但我愿意相信另一种解决方案是可能的。

你是如何处理这个问题的?在您看来,处理它的最佳策略是什么?

最佳答案

老实说,我会尝试放弃旧框架...这是“正确”完成此操作的唯一方法,让您可以完全控制您的开发环境。

或者,您可以弄清楚旧框架的哪些部分对于将网站保持在一起是完全必要的,然后提取这些部分,抛弃其余部分。这应该尽可能多地删除“规范化”部分。任何漏洞都可以相对容易地被覆盖(希望如此)。

关于css - 一个元素中同时处理两个css框架的最佳攻略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33305525/

相关文章:

css - Flexbox 拉伸(stretch) div 高度以填充父 div 的剩余高度

jquery - wrapbootstrap jquery 不能与 angularjs 一起使用

javascript - 如何在 JQUERY 中制作具有不同类的按钮标签?

css - 建议如何将 wirefy css 框架转换为 bootstrap css 框架

JavaScript 填充页面的其余部分不起作用

html - Bootstrap 3 - 全高侧面板

javascript - Bootstrap 3 - 将鼠标悬停在另一个表中的特定行上时突出显示表行

java - 在java中避免.CSV文件开头的逗号

ios - WKWebView 在 StoryBoard 中还是以编程方式(Swift 4)?

jquery - Ember – 在滚动到顶部时添加类