我正在研究 OOCSS 和 SMACSS 等 CSS 最佳实践和方法，以便在使用 Twitter Boostrap 3 和 LESS 的中型元素中使用。我开始掌握这些方法，但我在找出如何处理响应式设计和 CSS 模块关系方面遇到了一些麻烦。
例如，假设我有一个按钮模块，其中包含元素中使用的所有不同类型的按钮(颜色、形状、大小)。我怎样才能根据设备改变按钮。同一个按钮在移动设备上应该很大，在桌面设备上应该是普通按钮。 在 OOCSS 之后，我应该有 2 个皮肤类，如 btn--default 和 btn--large。但是由于每个设备的 HTML 都是相同的，所以我无法在 HTML 中切换此类。此外，在模块的 CSS 中使用媒体查询会根据设备大小更改按钮的大小，这似乎不是一个好主意，因为我会将模块与这种特定需求结合起来(如果我想要一个普通按钮怎么办？稍后移动？)。
作为另一个示例，我的产品部分模块具有不同的可能布局(垂直/水平)。如果我想在桌面上使用垂直布局，在移动设备上使用水平布局怎么办？我面临着完全相同的问题。我可以轻松创建 2 个不同的子模块(product--horiz、product-vert)，但我无法更改它们。
我可以使用 javascript 来切换类，但感觉不对，并且会在禁用 JS 的情况下破坏设计。你可以告诉我，如果一个元素从一个设备到另一个设备的变化如此之大，那么设计可能是不正确的，但限制这种情况将是一个真正的限制。
那么你对这个问题有什么看法。有没有什么通用的做法来面对它？
最佳答案
将您的示例用于按钮:
手机也是平板电脑，平板电脑有各种视口(viewport)尺寸，与桌面设备一样大。媒体查询不检测功能，如触摸，因此进行媒体查询仅适用于该视口(viewport)大小的视觉对象。最佳做法是为每个设备使用大按钮和大点击区域，除非您使用 .touch .btn- {big styles} 等 js 进行特征检测。我用了一点 script将 .no-touch 和 .touch 放在我的 html 上，但我不会为 .touch 制作更大的区域。如果可能的话，我会为所有东西制作它们。
关于css - 如何使用 ooccss 和 smacss 处理响应式设计中的 css 模块更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26676006/