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

Question

我正在研究CSS的最佳实践和方法，如OOCSS和SMACSS，以便在使用Twitter Boostrap 3或更少的中型项目中使用。我开始掌握这些方法了，但是我在找出如何处理响应式设计和CSS模块之间的关系时遇到了一些麻烦。

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

作为另一个例子，我有一个产品部分模块，它有不同的可能布局(垂直/水平)。如果我想在桌面中使用垂直布局，在移动设备中使用水平布局，该怎么办？我正面临着完全相同的问题。我可以很容易地创建两个不同的子模块(product--horiz，product-vert)，但我不能更改它们。

你可以告诉我，如果一个元素从一个设备到另一个设备有如此多的变化，那么设计可能是不正确的，但限制这一点将是一个真正的限制。

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

Answer 1

要将您的示例用于按钮：

移动设备也是平板电脑，平板电脑有各种视窗大小，与台式机一样大。媒体查询不会检测到触摸等功能，因此进行媒体查询仅适用于该视口大小的视觉。最佳实践是为每个设备使用大按钮和大点击区域，除非您使用js进行功能检测，例如.touch .btn- {big styles}。我使用一个小的script将.no-touch和.touch放在我的html上，但我不会费心为.touch创建更大的区域。如果可能的话，我会为每件事制作它们。

Answer 2

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