问题标签 [oocss]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
314 浏览

sass - oocss-compass 插件设置

我在设置 oocss-compass 插件时遇到问题。我做的步骤:

  1. 下载 oocss-compass 并将其放在我的桌面上(https://github.com/he8us/oocss-compass) 在我运行的 oocss-compass destkop 文件夹中:

    这颗宝石在我的宝石清单上(oocss-compass)

  2. 然后在我的工作文件夹(不是 RoR 项目,只是空文件夹和 html 静态页面)上,我运行:

    /li>

它返回给我一个错误:

可能缺少什么或我在安装时做错了什么?

0 投票
3 回答
999 浏览

html - Impact of OOCSS on website performance - shorter css but bulky html with more classes

I was reading today about OOCSS which says by using that approach have 2 benefits

  1. Shorter CSS = Better performance
  2. Better maintainability

I'm agree with second point but The first benefit point is to make css shorter by adding more classes to html which increase re-usability but CSS file of whole website can be cached in browser but HTML of each page is different.

My question is how a shorter CSS file can increase the overall site performance by adding more bytes (classes) into html, while css is a single file and will be downloaded at once in cache?

0 投票
1 回答
175 浏览

c# - 通过脚本为 oocss添加标签

0 投票
2 回答
28906 浏览

javascript - 用 javascript 修改 css 规则对象

可能重复:
从 Javascript 更改 CSS 规则集

我想知道是否有可能在不使用内联样式的情况下修改 Css 样式表声明。

这是一个简单的例子:

这给出了一个蓝色书写框,在悬停时变为绿色书写。

如果我为颜色提供内联样式,悬停行为将丢失:

无论如何,这都会给出一个红色的文字框。

所以我的问题是,如何访问和修改 css 声明对象而不是用内联样式覆盖样式。

谢谢,

0 投票
1 回答
414 浏览

css - Css 媒体对象源顺序

我喜欢这里描述的使用媒体对象模块背后的想法:

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

它是可以应用于许多 HTML 模式的 css,并且具有很大的优势,即无论图像有多大或包含模块的容器有多大都无关紧要。

问题是它依赖于像这样在源中首先出现的媒体(例如图像)

当在该内容 div 中您可能有这样的标题时,这将成为一个语义问题:

这样 h1 就在图像之后,即使它应该在图像之前,所以文档大纲是有意义的。它应该是这样的:

当我们不知道图像或内容 div 的宽度时,有没有人知道如何在液体布局容器中执行此操作?

提前致谢!

0 投票
3 回答
751 浏览

css - 使用 CSS 与 Sass (SCSS) - 基类问题和冗余

我正在尝试使用 SCSS 清理我的 CSS 以使其更清洁。

标准 CSS:

与 SCSS:

有什么方法可以避免创建不会使用的“generic-hr”类?我希望某种巢能很好地工作。在这种情况下,CSS 绝对比 SCSS 更干净、更易读。

理想情况下,我需要这个在 SCSS 中工作:

输出:

0 投票
4 回答
2749 浏览

css - 为了模块化目的,链接 CSS 类或单独命名它们更好吗?

例如,哪个更好:

方法1(分别命名类):

或者 - - - - - -

方法2(链类):

两者之间有什么更好的做法?

0 投票
2 回答
1686 浏览

css - OOCSS 容器和内容分离?

问题:第二个OOCSS原则真的有效吗?

根据 OOCSS 第二个原则,你不应该有依赖于位置的样式:

引用自https://github.com/stubbornella/oocss/wiki

本质上,这意味着“很少使用与位置相关的样式”。一个物体无论放在哪里都应该是一样的。因此,不要使用 .myObject h2 {...} 设置特定 h2 的样式,而是创建并应用一个描述相关 h2 的类,例如 h2 class="category"。

让我们举一个实际的例子。假设我有一个标准的 2.0 设置,具有正常的主体(白色背景)和巨大的页脚(黑色背景)。在正文中,我们有黑色链接,在页脚中当然需要白色。实现这一目标的最简单和最直观的方法不是:

如果我在哪里遵循 OOCSS 原则,我必须首先创建一个类:

然后继续将该类添加到我想要反转的每个链接。这似乎很麻烦。

整个语言的目的不是为Cascade制作样式吗?我在这里误解了什么吗?

0 投票
1 回答
451 浏览

css - 嵌套媒体对象 clearfix 不起作用

使用 N. Sullivan 的 OOCSS 媒体对象。我修改了原始的 css 以删除隐藏的溢出并用 micro-clearfix 替换它。我遇到的问题是当我尝试嵌套媒体对象时,嵌套的媒体对象不会清除它的浮动。我试图避免溢出:隐藏;

看看:http ://codepen.io/anon/pen/kDpLr

0 投票
2 回答
331 浏览

css - 在不改变选择器范围的情况下增加 CSS 选择器的类级别特异性的最简单方法

我目前正在详细阐述Nicole Sullivan 的 OOCSS 网格模块的变体,它只需要一个容器类来确定直接后代的布局。我知道这需要注意只能在支持 CSS3 的浏览器中工作。

这是差异的示例:

Vanilla OOCSS 网格规则:

我的简化网格规则:

另一个重要的警告是假设元素的小数大小完全由其兄弟元素的数量决定 - 而这是这段代码的基本点(以实现更精简的 HTML,而无需到处都有明确的大小),可能会有一些例外情况。有不成比例的宽度。

由于我的选择器的特殊性,我不能简单地将 OOCSS 模块重新插入:unitXofY在 HTML 中指定一个类将专门用于取代默认假设,但实际上我的选择器更强大,并且总是会覆盖指定的类.

我正在寻找的是在不限制特定性的实际效果的情况下取代这些选择器的最简洁或最优雅的方式。也就是说,除了它的类之外,它不能对所选元素做出任何不总是正确的假设。