我写了一个非常复杂的小部件，它使用 OnDemandList 创建一个允许完全编辑(包括添加)商店的小部件。
现在...我不完全是 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' );
我还需要确保每一行都有 position:absolute 以便编辑器被放置在正确的位置:
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) 据我所知，小部件的 CSS 类应该在 postCreate 而不是 buildRendering 中设置，否则 Dojo 似乎使用 className 清除那里设置的任何东西...这是您通常对创建自己的 domNode 的小部件所做的吗？
最佳答案
我个人对内联 CSS 与 CSS 样式表的看法是，我喜欢在单独的样式表中编写所有内容。这背后的原因是您的代码因样式代码而变得杂乱无章，但在分离问题时，我认为最好将 CSS 编写在一个单独的文件中。
当然，内联 CSS 始终是最具体的(最重要的)，所以如果你真的想强制执行某些内容，你可以在你的 CSS 规则中添加一个 !important 虽然我建议不要那么多使用它们。
您应该尽可能具体地编写您的 CSS，因为您不想干扰其他小部件/HTML，但您也不希望相反的情况(外部 CSS 干扰您的小部件)。但当然，你可以这样写:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
这主要取决于 .row-editor 的实际含义。如果它是“全局的”，您可以保留 .row-editor ，只是因为它允许您定义一个包含通用 CSS 的全局 .row-editor，而您的 .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 与 postCreate 的问题，嗯，我想你使用的是 dijit/_TemplatedMixin mixin。如果是这样，那么如果您查看 code 并查找 buildRendering，您会发现它正在执行操作。这意味着如果您编写自己的 buildRendering，您实际上将用您的代码替换他们的代码。如果你想确保 Dojo 先执行它自己的逻辑，你必须这样写:
buildRendering: function() {
this.inherited(arguments);
/** Your code */
}
那行额外的代码实际上会调用继承模块/mixin 的相同方法。你可以用那一行做你想做的，如果你不想调用继承的模块，你就把它去掉(也可能打破它)，如果你想在最后一步执行它，你只需切换 this.inherited(arguments);到 buildRendering 函数的最后一步(但随后它可能会覆盖您的更改)。
但归根结底，这只是一种观点，我相信还有其他的观点也是正确的(对于其他甚至类似的用例)。但我可以告诉你，Dojo 以类似的方式为他们自己的小部件做事，所以也许遵循它也是一个不错的方法。
很抱歉回答太长，但我写下它是为了对类似的问题也有帮助。
关于CSS 类和小部件 : three questions，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21175377/