如何使用ooccss和smacss處理響應式設計中的css模塊更改

我正在研究CSS最佳實踐和方法，如OOCSS和SMACSS以在使用Twitter Boostrap 3和LESS的中等範圍項目中使用。我開始掌握這些方法，但是我發現如何處理響應式設計和CSS模塊關係有些麻煩。如何使用ooccss和smacss處理響應式設計中的css模塊更改

例如，假設我有一個按鈕模塊，其中包含項目中使用的所有不同類型的按鈕（顏色，形狀，大小）。我怎樣才能讓按鈕更改取決於設備。移動設備中的相同按鈕應該很大，而桌面設備中的按鈕應該很大繼OOCSS之後，我應該有2個皮膚類，比如btn - default和btn - large。但是因爲每個設備的HTML都是一樣的，所以我不能在HTML中切換這個類。在模塊的CSS中使用媒體查詢會根據設備大小更改按鈕的大小似乎不是一個好主意，因爲我將耦合模塊與此特定需求（以及如果我想要一個普通按鈕稍後移動？）。

作爲另一個例子，我有產品部分模塊有不同的佈局（垂直/水平）。如果我想在桌面和移動設備中使用垂直佈局，那麼該怎麼辦？我面對完全相同的問題。我可以輕鬆創建2個不同的子模塊（product-horiz，product-vert），但我無法更改它們。

我可以使用JavaScript來切換類，但它不覺得正確，並會打破禁用JS的設計。你可以告訴我，如果一個元素從一個設備改變到另一個設備，那麼設計可能是不正確的，但這對抑制這種設備是一個真正的限制。

那麼你對這個問題有什麼想法。是否有任何普遍的做法來面對它？

來源

2014-10-31 ben.anakena

您的基本按鈕樣式應該在'modules.scss'中的按鈕模塊中定義。在這裏應用任何可以超越所有按鈕的樣式。然後處理smacss'states.scss'文件中的差異（最後編譯）。您應該在狀態文件中有一個「按鈕」部分，您可以在其中處理媒體查詢和可改變按鈕外觀的獨特類。希望有所幫助，如果需要，我可以詳細闡述。 – JordanBarber 2016-04-06 14:08:26

要使用你的榜樣的按鈕：

手機也是平板電腦和平板電腦來，在各種大小視是一樣的桌面一樣大的。媒體查詢不是檢測功能，如觸摸，所以使媒體查詢僅適用於該視口大小的可視化。除非您使用諸如.touch .btn- {big styles}之類的js進行特徵檢測，否則最好使用大按鈕和大點擊區域來放置每個設備的胖手指。我使用一個script將.no-touch和.touch放在我的html上，但我不打擾只爲.touch製作更大的區域。如果可能的話，我會盡全力爲他們做好準備。

來源

2014-10-31 19:01:19 Christina

我同意你的意見，也許按鈕的例子不是更合適，但你認爲一個好的設計不應該改變一些模塊元素的皮膚取決於視口？如果不是，你將如何處理這種變化？ – 2014-11-03 15:51:06

視口和設備是不同的。如果你想讓人們用手指使用你的組件，爲此設計它。如果你只有一個桌面應用程序，然後設計它。如果你有兩個，設計它爲肥胖的手指。先使用小視口第一個CSS，並使所有內容都不堆疊，然後隨着視口寬度（和/或）高度的增加，創建媒體查詢以在水平情況下添加其他樣式。 – Christina 2014-11-03 15:54:51

來源

2016-04-06 14:08:43 JordanBarber

如何使用ooccss和smacss處理響應式設計中的css模塊更改

回答

相關問題