寶貝推薦模塊CSS定義規范一（我一直采用less的方式寫CSS，覺得這樣很方便）
寶貝推薦模塊的基本結構如下
.tshop-pbsm-shop-item-recommend { //模塊頂部 .skin-box-tp {} //模塊標題 .skin-box-hd {} //模塊主體 .skin-box-bd {} //模塊結尾 .skin-box-bt {} }
一般，為了保持每個模塊的標題統一，可以將 .skin-box-tp和.skin-box-hd及.skin-box-bt的樣式預定義在common.less中。假設在common.less中他們分別對應.mk-tp, .mk-hd, .mk-bt，那么，接下來用下面的代碼定義模塊的頂部、標題、尾部（如果想獨特一點，那么就單獨定義）
.tshop-pbsm-shop-item-recommend { .skin-box-tp { .mk-bt; } .skin-box-hd { .mk-hd; } .skin-box-bt { .mk-bt; } }
接下來，我要定義該模塊在不同布局中的樣式。
前提分析：
1、在新旺鋪中，CSS只允許定義在模塊之內，沒有公共CSS這么一說。也就是說我們寫的CSS代碼只能以.tshop-pbsm-shop-item-recommend開頭。
2、定義在所有布局中寶貝推薦模塊的公用樣式，用如下的方法：
.tshop-pbsm-shop-item-recommend .skin-box-bd .item { //這里定義寶貝的公用樣式 //具體可以參考最后面附上的完整寶貝推薦模塊的結構 }
3、定義不同布局中的特殊樣式
新旺鋪中寶貝推薦模塊的布局擁有如下幾種形式：
.item3line1：每行3個寶貝，可存在950/750布局中。
.item4line1：每行4個寶貝，可存在950/750布局中。
.item5line1：每行5個寶貝，可存在950/750布局中。
.item7line1：每行7個寶貝，只存在950布局中。
.item30line1：每行3個寶貝，只存在750布局中。
.item1line1：每行1個寶貝，只存在190布局中。
現在的問題是：
item3line1、item4line1、item5line1他們是適應在950/750之中的。但是在不同的布局中，每個寶貝占的寬度是不一樣的。如何才能讓定義的樣式兼容750/950布局呢？方法是：在修改這些寶貝排列方式的時候，.item及其子元素不能指定寬度，否則可能產生不能兼容950/750的情況。
最后附上一個完整的寶貝推薦模塊的CSS結構定義
.skin-box-bd { //行樣式 div.item3line1, div.item4line1 { dl.item { //每行的最后一個為 dl.item.last //寶貝圖片 dt.photo {} //寶貝詳情 dd.detail { //寶貝屬性 div.attribute { //寶貝原價 div.cprice-area { span.c-price { //只影響價格的數字樣式} } //寶貝銷量 div.sale-area { span.sale-num { //只影響銷量數字 } } } //寶貝名字 a.item-name {} } //寶貝評論 dd.rates { //評論數與更多評論 div.title { //評論數量展示 h4 { span { //數量 } } //更多評論鏈接 a {} } //最新評論 p.rate {} } } } }
注意：當每行顯示5、7個寶貝是，不顯示銷售筆數，不顯示評論、不顯示評論數。由於店鋪沒有設置打折，所以上面的代碼中並沒有提選出折扣價的部分。
總結：寶貝推薦模塊是考驗一個設計師寫CSS能力的模塊，在這里可能還存在更好的編寫方式，待日后慢慢發現。