问题标签 [oocss]

我正在使用 Twitter Bootstrap 3，我想制作可重用的样式类。下面的代码完全按照我想要的方式工作，但它是否符合 Bootstrap 使用的 SMACKS /OOCSS 命名约定？

注意 - 我使用 LESS 而不是纯 CSS，所以我将使用变量来处理重复的边框厚度等内容。

http://codepen.io/anon/pen/jduyE

我正在研究 CSS 最佳实践和方法，如 OOCSS 和 SMACSS，以便在使用 Twitter Boostrap 3 和 LESS 的中等规模项目中使用。我开始掌握这些方法，但我很难找出如何处理响应式设计和 CSS 模块的关系。

例如，假设我有一个按钮模块，其中包含项目中使用的所有不同类型的按钮（颜色、形状、大小）。如何根据设备更改按钮。相同的按钮在移动设备中应该很大，在桌面中应该是正常的。在 OOCSS 之后，我应该有 2 个皮肤类，例如 btn--default 和 btn--large。但由于每个设备的 HTML 都是相同的，我无法在 HTML 中切换此类。此外，在模块的 CSS 中使用媒体查询会根据设备大小更改按钮的大小似乎不是一个好主意，因为我会将模块与这个特定需求结合起来（如果我想要一个普通按钮怎么办？稍后移动？）。

作为另一个示例，我有具有不同可能布局（垂直/水平）的产品部分模块。如果我想在桌面使用垂直布局而在移动设备中使用水平布局怎么办？我面临着完全相同的问题。我可以轻松创建 2 个不同的子模块（product--horiz、product-vert），但我无法更改它们。

我可以使用 javascript 来切换类，但感觉不对，并且会在禁用 JS 的情况下破坏设计。你可以告诉我，如果一个元素从一个设备到另一个设备发生如此大的变化，那么设计可能是不正确的，但限制这种情况将是一个真正的限制。

那么你对这个问题有什么看法。是否有任何普遍的做法来面对它？

我想在我的 Twitter Bootstrap 站点中为表单创建一种新样式，并且我想保持 SMACKS / OOCSS 约定。

这是默认形式：

如果我想覆盖输入样式，在我看来，要遵守添加一类 form-control-newstyle 的约定：

但是我也想为标签设置样式。我应该向标签或 div.form-group 添加新样式吗？

我是新手SMACSS。我正在使用 sass，我想css使用SMACSS. 我对将文件放在哪里有点困惑。我的shadowbox.css意思是在 BASE 或其他地方。我阅读了文档，但仍然很混乱。请支持。谢谢。

在我的 CSS 文件中，作为“重置”的一部分，我将所有链接的样式设置为：

我知道这些是针对页面上所有链接的非常广泛的规则，但这是它们的默认外观，所以我想这样做应该没问题（甚至需要！）。

现在，我的导航看起来像这样：

使用相应的 CSS：

不幸的是，只有未访问的链接会显示为绿色，已经访问过的链接仍然是紫色的。
我发现添加!important会“解决”问题，但这并不是很干净。

我当然可以

但这似乎有点臃肿——我也需要为其他链接状态这样做。

有什么办法可以解决这个问题，或者这是正常的行为——也许我的模块化 CSS 方法有问题？

我在我的网络项目中使用 Awesome Font。有什么选择如何制作一堆图标的快捷方式吗？例如，我有circle-thin图标。现在在页面上我想把三个图标放在一起，所以结果是OOO，但我不想<i class="fa fa-circle-thin"></i>在代码中放 3x times s 。那么我可以在编写时以某种方式创建CSS快捷方式，会出现3个圆圈吗？

例子：

然后在页面上，我将只使用.circle_three类而不是输入三遍圆圈的代码。

所以我对 OOCSS 有疑问。它应该更便携，但与我通常做的事情相比，我发现它不那么便携。

我的例子：

我有一个小部件推荐。在主要内容主体（具有白色背景）中，推荐使用黑色字体。但是在页脚（蓝色背景）中，推荐需要白色字体。

在 OOCSS 之前，我会做这样的事情：

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色可以简单地工作 - 我不需要更改小部件的 CSS 或 DOM 类。

使用新的 OOCSS/BEM，我不应该将 .testimonial 类耦合到 ID（或位置），而是应该像这样子类化它：

这样做的问题是，我不能再将我的推荐从内容区域拖到页脚而不进入 DOM 并更改推荐小部件上的类 - 它的可移植性较差，因为它需要开发人员的手动干预；而在编辑器可以拖动它并且样式是自动的之前。

我错过了什么吗？那里似乎没有可靠的真实例子？

ul标签非常通用，我一直在努力解决这个问题。

最初，我为我的ul和li标签定义了一个基本样式规则，用于处理所见即所得文本的通用文本块中的项目符号。我正在使用 BEM，所以我想我只需将一个类添加到任何ul具有不同角色的类（例如菜单或新闻缩略图列表等）

问题是我并不总是能够控制标记。我当前的问题是一个分页插件，它使用ul/li结构但不允许我向ul.

我正在使用 BEM，所以我真的不想使用后代选择器，尤其是元素选择器，但我意识到当我无法访问ul/li标记时我可能需要这样做。

任何建议都将不胜感激 - 特别是在基本/休息规则方面，因为我ul/li在很多网站上都有列表，并且一劳永逸地想要掌握这个问题。

谢谢

目前我正在为一些应用程序开发 GUI，该应用程序是在 QT（多平台框架）中开发的。QT 中的 GUI 可以设置为普通 CSS 样式。

因此，我将 GUI 开发为一个基本的 Web 应用程序（HTML5、CSS3 和 JS），并且出于某些原因，我使用 LESS 预处理器进行样式设置和创建 OOCSS（面向对象的 CSS）......

由LESS生成：

是否有任何工具或任务（grunt/gulp）可以将 OOCSS 转换为 oldschool 样式（长版）？

预期结果：

当然，我将不得不清理课程，但该工具将为我节省大量时间。

原因： 我的客户在 CSS 方面不高级。所以，OOCSS 对他来说可能有点困惑。

感谢您的回复亚当

我正在创建一个受 ITCSS、BEM 和 OOCSS 启发的样式表，但不确定如何将结构属性与化妆品属性分开。

我理解 ITCSS 和 OOCSS 的一个例子：

我看到的问题与 ITCSS 更相关。同一个元素有两个不同的前缀（两个类别），当我可以为同一个元素使用相同的前缀时，可能更容易理解。

这种方法正确吗？