我正在研究CSS最佳实践和方法，如OOCSS和SMACSS，以便在使用Twitter Boostrap 3和LESS的中型项目中使用。我开始掌握这些方法但是我在查找如何处理响应式设计和CSS模块关系方面遇到了一些麻烦。
例如，假设我有一个按钮模块，其中包含项目中使用的所有不同类型的按钮（颜色，形状，大小）。如何根据设备更改按钮。移动设备中的相同按钮应该很大，而桌面设备中则相同。 在OOCSS之后我应该有2个皮肤类，比如btn - default和btn - large。但由于每个设备的HTML都相同，我无法在HTML中切换此类。在模块的CSS中使用媒体查询会根据设备大小改变按钮的大小似乎不是一个好主意，因为我会将模块与这个特定需求耦合（如果我想要一个普通的按钮，那该怎么办？手机以后？）。
作为另一个例子，我的产品部分模块具有不同的可能布局（垂直/水平）。如果我想在桌面和横向移动中使用垂直布局，该怎么办？我面临着同样的问题。我可以轻松创建2个不同的子模块（product - horiz，product-vert），但我无法更改它们。
我可以使用javascript来切换类但是感觉不对，并且会在禁用JS的情况下破坏设计。你可以告诉我，如果一个元素从一个设备变化到另一个设备，那么设计可能是不正确的，但是限制它是一个真正的限制。
那你对这个问题有什么看法？是否有任何普遍的做法用于面对它？
答案 0 :(得分：0)
将您的示例用于按钮：
移动设备也是平板电脑，平板电脑有各种视口大小，与桌面一样大。媒体查询未检测到触摸等功能，因此仅对该视口大小的视觉进行媒体查询。最佳做法是为每个设备使用大按钮和大点击区域，除非你使用.souch .btn- {大样式}等js进行特征检测。我使用一点script将.no-touch和.touch放在我的html上，但我不打算只为.touch创建更大的区域。如果可能的话，我会为所有事情做好准备。
答案 1 :(得分：0)
您的基本按钮样式应在＆＃39; modules.scss＆＃39;的按钮模块中定义。在这里应用任何超越所有按钮的样式。然后处理你的smacss＆＃39; states.scss＆＃39;文件（最后编译）。你应该有一个按钮＆＃39;您在states文件中处理媒体查询的部分和将改变按钮外观的唯一类。希望有所帮助，如果需要，我可以详细说明。