CSS 类和小部件：三个问题答案

【问题标题】：CSS classes and widgets: three questionsCSS 类和小部件：三个问题
【发布时间】：2014-01-16 23:56:16
【问题描述】：

我编写了一个非常复杂的小部件，它使用 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 dojo widget dgrid

【解决方案1】：

我个人对内联 CSS 与 CSS 样式表的看法是，我喜欢将所有内容都写在单独的样式表中。这背后的原因是你的代码变得杂乱无章，但是当分离关注点时，我认为最好将你的 CSS 写在一个单独的文件中。

当然，内联 CSS 始终是最具体的（最重要的），所以如果你真的想强制执行某些内容，可以在 CSS 规则中添加 !important，但我建议不要过多使用它们.

您应该尽可能具体地编写您的 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 有像 .dijitInline 这样的全局 CSS 类，但也有像 .dijitCalendarDateLabel 这样的特定 CSS 类。

如果有人想改变小部件的样式，他可以添加一个父类，这样他就可以制作一个更具体的 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 的相同方法。你可以用那条线做你想做的事，如果你不想调用继承的模块，你把它排除在外（可能也会破坏它），如果你想在最后一步执行它，你只需切换 @ 987654345@ 到您在 buildRendering 函数中的最后一步（但它可能会覆盖您的更改）。

但最后，这只是一种观点，我确信那里还有其他正确的观点（对于其他甚至类似的用例）。但我可以告诉你，Dojo 以类似的方式为他们自己的小部件做事，所以也许遵循它也不是一个坏方法。

对不起，答案很长，但我写它是为了对类似的问题也有用。

【讨论】：