如何使用 ooccss 和 smacss 处理响应式设计中的 css 模块更改答案

【问题标题】：How to handle css modules changes in responsive design using ooccss and smacss如何使用 ooccss 和 smacss 处理响应式设计中的 css 模块更改
【发布时间】：2014-12-27 20:27:18
【问题描述】：

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

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

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

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

那么您对这个问题有什么看法。有没有通用的做法来面对它？

【问题讨论】：

您的基本按钮样式应在“modules.scss”的按钮模块中定义。在此处应用将超越所有按钮的任何样式。然后处理 smacss 'states.scss' 文件中的差异（最后编译）。您的状态文件中应该有一个“按钮”部分，您可以在其中处理将改变按钮外观的媒体查询和唯一类。希望对您有所帮助，如果您需要，我可以详细说明。

标签： css responsive-design less oocss smacss

【解决方案1】：

将您的示例用于按钮：

移动设备也是平板电脑，平板电脑有多种视口尺寸，与台式机一样大。媒体查询不会检测功能，例如触摸，因此进行媒体查询仅适用于该视口大小的视觉效果。除非您使用 .touch .btn- {big styles} 之类的 js 进行特征检测，否则最好为每个设备使用大按钮和大点击区域来显示胖手指。我用一点script 将.no-touch 和.touch 放在我的html 上，但我不会为.touch 制作更大的区域。如果可能的话，我会为所有东西制作它们。

【讨论】：

我同意你的说法，也许按钮示例不是更合适，但你认为一个好的设计不应该根据视口改变某些模块元素皮肤吗？如果不是，您将如何处理这种变化？
视口和设备不同。如果您想让人们用手指使用您的组件，请为此设计它。如果您只有一个桌面应用程序，请为此设计它。如果两者都有，请为胖手指设计。首先使用小视口 css 并让所有内容都堆叠，没有浮动，然后随着视口宽度（和/或）高度的增加，创建媒体查询以添加其他样式以适应水平情况。

【解决方案2】：

您的基本按钮样式应在“modules.scss”的按钮模块中定义。在此处应用将超越所有按钮的任何样式。然后处理 smacss 'states.scss' 文件（最后编译）中的差异。您的状态文件中应该有一个“按钮”部分，您可以在其中处理将改变按钮外观的媒体查询和唯一类。希望对您有所帮助，如果您需要，我可以详细说明。

【讨论】：