问题标签 [oocss]

我只是了解 OOCSS 方法论。因为我认为它使一切更容易理解，我也在尝试使用 BEM 命名约定。

使用这个原则，我正在尝试为主页创建导航 - 基本上只是一个内联列表。由于 OOCSS 是关于抽象的，所以到目前为止我创建了这个 CSS：

我尽量不使用类名nav，比如navigation我第一次尝试在应用皮肤之前布局结构 - 这就是我的实际问题开始的地方。

要添加一些颜色，更改字体大小等，我可能只是将其添加为修饰符，例如.horizontal-list--nav. 另一个修饰符可能是面包屑导航：.horizontal-list--breadcrumb. 这样可以吗？

对我来说这是合乎逻辑的，因为 ie 文本颜色与列表本身是内联的无关，但列表是例如面包屑，但我不确定我是否从错误的方向接近这个东西。

此外，该列表的 HTML 看起来像这样：

是的li一个元素horizontal-list，这很清楚。但是a嵌套在 中的东西li呢，我该如何标记呢？根据OOCSS原则，我不应该这样做

正确的？但是添加一个类似的类在horizontal-list__item__item某种程度上似乎也很错误。我该如何正确地做到这一点？

我的问题与这个不同，但它是关于相同的原则，所以这句话在这里也很重要：

来自https://github.com/stubbornella/oocss/wiki

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

但是，如果设计要求对象在某些容器中时其样式会发生变化怎么办？这是我的问题的简化示例。假设有一个名为 foo 的对象和一个名为 bar 的容器对象。foo 和 bar 有自己的与位置无关的样式：

但是当 foo 像这样在容器 bar 内时，当用户将鼠标悬停在 bar 上时，它的颜色需要改变：

在这种情况下，您似乎无法避免编写一个与位置相关的选择器，如下所示：

我想到的一个解决方案是引入一个明确依赖于 bar 的类（使用BEM 命名约定来明确父子关系），并将其添加到 foo 对象：

我想确认一下，这是处理问题的好方法吗？OOCSS 中还有其他方法吗？

在将我的主要 css 重构为模块化方法时，我@media all {}用来在 IDE 中包装 css 模块。这种方法使得扫描文件内容变得更加容易，因为我们现在不能使用像 less 或 sass 这样的预处理器。

我唯一担心的是所有这些媒体查询（每个 css 模块/一组连贯选择器一个）可能会在渲染站点时导致性能下降。我不关心我们的 css 文件的文件大小，因为这是一个小型模块化 css 框架和正确压缩的小问题。

如果经常使用媒体查询，@media all {}是否会对性能（台式机和移动/其他）设备产生影响？

在 Nicolas Gallaghers关于 HTML 语义的文章中，他概述了一种以模块化方式构建 html 和 css 的方法（受 BEM 架构的影响）。他举了一个例子，我不完全理解：

• 首先，我不明白的是：实用程序和组件之间有什么区别？
• 这两者之间的符号差异从何而来（实用程序类名以“u-”为前缀）？
• 最后的; 状态和修饰符有什么区别（它们都有单独的符号）？

他在他的文章中没有深入解释这一点，我仍然想了解。所以我希望有人能回答这个问题。

我正在使用 BEM 方法来编写 html + css。使用这种语法：

• 块：block_name
  • 元素：block_name__element_name
  • 修饰符：block_name__element_name--修饰符

当我在另一个街区中有一个街区时，我会感到困惑。例如，在标题中，我希望标题是我可以引用的块，而导航和徽标是块。我想将那些导航和徽标块引用为 site_header 中的。但是，我该怎么写呢？像 block_name__sub_block_name 这样的链接块似乎很长。

有没有人有一个典型的方式来写这个例子？

大多数 CSS 方法都有可重用模块的概念——BEM 将它们称为块，而 SMACSS 和 OOCSS 将它们称为模块。他们都建议使用类创建模块，例如

现在，如果我的 HTML 标记中有两个或更多房间实例，我该如何区分它们？我一直在做这样的事情：

但是我在任何方法中都没有找到模块标识的概念。我只看到模块修饰符或子类的概念，即创建具有扩展外观和/或行为的模块，例如room-kitchen. 但这不是我在这里所做的——我所做的只是创建同一个模块的两个实例并使用标识将它们放置在不同的位置。我没有看到任何关于模块实例以及如何命名它们的方法论。我错过了什么吗？

我想知道，哪种方式是真正面向目标的 CSS，您可以在其中以干净的方式真正快速地重用组件。

场景一：

HTML：

CSS：

场景二：

HTML

CSS

我只看到两个负面方面，每个场景都有一个。

在场景 1 中，您最终可能会拥有非常长的类名。
在场景 2 中，如果您将 .submit 定义为它自己的元素/组件，那么您最终会遇到老问题，即您无法重用代码片段以在任何地方保持不变。

我最近在 inuitcss 框架中遇到了这种OOCSS 媒体对象的实现：

虽然我知道什么是块格式化上下文，但我仍然不确定为什么作者使用 clearfix on而不是在原始媒体对象.media中使用overflow: hidden;like 。

我知道对象主体上的块格式化上下文对于防止内容在图像下方流动是必要的，但是在父对象上使用溢出属性有什么好处呢？

我正在尝试重新创建OOCSS 媒体对象，以便在某些文本旁边显示图像。媒体对象用于overflow: hidden创建新的块格式化上下文。这样可以确保文本不会环绕图像。

但是，当我的媒体对象绝对定位时，Firefox 呈现的文本与 Chrome 和 Internet Explorer 不同。Firefox 似乎将媒体框的宽度仅基于文本的宽度，而不是图像的宽度和文本的宽度。

Chrome 和 Internet Explorer（恕我直言预期行为）

火狐

有关扩展示例，请参阅此codepen。

我想知道是否有人知道是否有解决方法，以及为什么 Firefox 会以不同的方式呈现。

有很多 CSS 的模块化解决方案。我在主题中列出了一些，但可能已经有更多了。您如何选择哪一个用于您的新项目？有比较吗？