CSS類和小部件：三個問題

我寫了一個非常複雜的小部件，它使用OnDemandList創建一個允許完全編輯（包括添加）存儲的小部件。CSS類和小部件：三個問題

現在......我不完全是一個CSS大師（完全相反），並會喜歡一些指導，只是爲了檢查我是否以半理智的方式做事。

當我創建我的插件的編輯，我做的事：

buildRendering: function(){ 
    // ... 
    this.domNode = put('div'); 
    // ... 
}, 

postCreate: function(){ 
    // ... 
    // This is here, because if I set the class in buildRendering, it gets zapped by className (the widget's declaration) 
    put(this.domNode, '.editable-list'); 
    // ... 
},

然後當編輯時動態添加：

put(row.element, editingWidget.domNode); 
    put(editingWidget.domNode, '.editable-list-row-editor');

我也需要確保每一行都有位置：絕對讓編輯得到放置在正確的位置：

domStyle.set(row.element, 'position', 'relative');

在CSS，我有：

.editable-list-row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
}

問題：

1）它是在最佳實踐方面確定，甚至添加一個樣式像我domStyle.set(row.element, 'position', 'relative');沒有...？或者我應該用CSS來做到這一點？我以編程的方式做到了，因爲它的確是重要的是它的relative。

2）在CSS方面是否可以將事情儘可能地放在非特定的位置？這個想法是，用戶可能（也可能會）最終編寫自己的CSS，並通過編寫更具體的規則來壓倒性的東西......是嗎？或者，也許我應該寫：

.editable-list .editable-list-row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
}

或者更好：

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
}

...？

3）從我所看到的，widget的CSS類應該在postCreate而非buildRendering設置，否則道場似乎用className扎普任何設置有...是什麼你通常用做一個創建自己的domNode的小部件？

來源

2014-01-16 Merc

我個人對內聯CSS vs CSS樣式表的看法是，我喜歡在單獨的樣式表中編寫所有內容。這背後的原因是你的代碼變得混亂的樣式代碼，但是當分開關注時，我認爲把CSS寫在一個單獨的文件中會更好。

當然，內聯CSS總是最特別的一個（最重要的一個），所以如果你真的想強制執行某些東西，你可以添加一個!important到你的CSS規則中，我會建議不要那麼多。

你應該寫你的CSS儘可能具體，因爲你不希望與其他部件/ HTML干涉，但你不想對面以及（外部CSS與窗口小部件的干擾）。但當然，你可以寫東西爲：

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
}

它主要取決於.row-editor的實際含義。如果它是「全局」的東西，你可以保留.row-editor，只是因爲它可以讓你定義一個全局的.row-editor，它包含了共同的CSS，而你的.editable-list .row-editor將包含該小部件的特定CSS規則。

例如，讓我們考慮的是你有一個類似的CSS另一個工具：

.other-widget .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 25; 
}

然後，你還可以寫下面的CSS：

.row-editor { 
    position: absolute; 
    top: 0; 
} 

.editable-list .row-editor { 
    z-index: 20; 
} 

.other-widget .row-editor { 
    z-index: 25; 
}

但它實際上取決於你怎麼看.row-editor類，如果您認爲它只針對您的可編輯列表，那麼您也可以考慮爲它加上前綴。它與Dojo已經做的類似，Dojo有全球CSS類，如.dijitInline，但也有特定的CSS類，如.dijitCalendarDateLabel。

如果有人想改變小部件的風格，他可以添加一個父類，這樣他就可以製作一個更具體的CSS選擇器。一個例子，讓我們說，下面是你的CSS：

.editable-list .row-editor { 
    position: absolute; 
    top: 0; 
    z-index: 20; 
}

然後人誰願意更改CSS只是增加了一個標籤到父（例如<body>標籤）：

<body class="myTheme"> 
    <!-- Your HTML --> 
</body>

而且然後指定以下CSS：

.myTheme .editable-list .row-editor { 
    z-index: 30; 
}

這實際上會覆蓋您的z-index。 Dojo已經在他們的主題中使用了這個原則。當你想使用一個特定的主題，添加主題CSS並添加主題的名稱在你的身體一個類的名稱，例如：

<body class="claro"> 
    <!-- Your HTML --> 
</body>

當然你不需要在身體來定義它級別，只要它是你的小部件的父節點，它就可以工作。

關於關於buildRendering VS postCreate的問題，好吧，我想你使用dijit/_TemplatedMixin混入。如果是這樣，那麼如果你看看code並尋找buildRendering你會看到它正在做的東西。這意味着如果你自己編寫buildRendering，你實際上會用你的代碼替換它們的代碼。如果你想確保道場執行其自己的邏輯首先，你必須寫一樣的東西：

buildRendering: function() { 
    this.inherited(arguments); 
    /** Your code */ 
}

這代碼額外的行會實際上調用繼承模塊/混入的方法相同。如果你不想讓繼承的模塊被調用，你可以將它保留出來（可能也會破壞它），如果你想執行它作爲你最後一步切換this.inherited(arguments);到buildRendering函數中的最後一步（但它可能會覆蓋您的更改）。

但最終，這一切只是一個意見，我敢肯定，還有其他的意見存在，同時也是正確的（其他甚至類似用途的情況下）。但我可以告訴你，Dojo以類似的方式爲自己的小部件做了些什麼，所以也許這也不是一個壞方法。

對不起，很長的回答，但我寫了它，以便它也可以用於類似的問題。

來源

2014-01-17 07:10:52 g00glen00b

我的好領主多麼美妙的答案...... – Merc

CSS類和小部件：三個問題

回答

相關問題