淘寶作為中國最大的電子商務平臺之一，其設計與交互不斷優化，給用戶購物帶來了很大便利。其中，CSS分類是其設計中重要的一環。

淘寶的CSS分類根據不同的頁面有不同的命名規則，主要分為"common"、"layout"、"module"、"widget" 四個大類。

其中，“common”是指一些通用性的CSS樣式，通常將頁面中使用到的一些基礎樣式和公用樣式都存放在這個類中。例如，包括字體、顏色、邊框、寬高等基本樣式；還有按鈕、輸入框、下拉菜單等公用組件的樣式。

/* common.css樣式舉例 */
body{background-color: #f5f5f5; font-size: 14px;}
.btn{padding: 5px 12px; border-radius: 3px; background-color: #ff7f2a;}
.text-input{padding: 6px; border: 1px solid #ddd; border-radius: 3px;}

"layout"是指布局相關的CSS樣式，通常包含一些 布局容器相關的樣式。例如，將整個頁面分為頭部、主體、底部內容部分；還有多列布局、居中對齊等樣式。

/* layout.css樣式舉例 */
.header{height: 50px; background-color: #fff; border-bottom: 1px solid #eee;}
.body{width: 1000px; margin: 0 auto;}
.col-2{float: left; width: 50%;}

"module"是應用層面的CSS樣式，通常一個頁面會由多個模塊（module）組成。例如，商品展示模塊、廣告模塊、購物車模塊等。每個模塊都是由一些可重用的 HTML 元素組成，這些元素都有一些復雜的樣式附加其上，這些樣式存放在 module.css 中。

/* module.css樣式舉例 */
.item{border: 1px solid #ccc; padding: 10px;}
.price{color: #ff7f2a; font-size: 16px;}
.img-wrap{width: 120px; height: 120px;}

最后，“widget”是指一些輕量級的組件樣式，通常用于頁面中小塊區域的組件。例如，返回頂部按鈕、搜索框自動下拉伸展效果、購買數量加減組件等。

/* widget.css樣式舉例 */
.back-to-top{position: fixed; bottom: 50px; right: 50px;}
.search-dropdown{display: none; position: absolute; width: 200px; height: 300px;}
.amount-change{border: 1px solid #ccc; width: 120px; height: 40px;}

在淘寶設計的實現中，CSS分類幫助開發者高效地維護頁面樣式，方便了代碼的閱讀和維護。