在 C# 代码中嵌入 CSS/jQuery 代码不好吗？答案

【问题标题】：Is embedding CSS/jQuery code in C# code bad?在 C# 代码中嵌入 CSS/jQuery 代码不好吗？
【发布时间】：2011-08-27 17:53:42
【问题描述】：

我在查看我们的工作代码库时看到了这种类型的代码：

    private Button AddClearButton()
    {
        return new Button
                   {
                       OnClientClick =
                           string.Format(@"$('.{0}').css('background-color', '#FBFBFB');
                                   $('#' + {1}).val('');
                                   $('#' + {2}).val('');
                                   return false;", _className, _hiddenImageNameClientId, _hiddenPathClientId),
                       Text = LanguageManager.Instance.Translate("/button/clear")
                   };
    }

或

            _nameAndImageDiv = new HtmlGenericControl("div");
            var imageDiv = new HtmlGenericControl("div");
            imageDiv.Attributes.Add("style", "width: 70px; height: 50px; text-align: center; padding-top: 5px; ");

            var nameDiv = new HtmlGenericControl("div");
            nameDiv.Attributes.Add("style", "width: 70px; word-wrap: break-word; text-align: center;");
            var image = new HostingThumbnailImage();

免责声明：我以前没有使用过 CSS。但是听说css、js、html、C#应该分开，而不是放在一起。

那么，上面的代码不好吗？如果是，更好的方法是什么？

【问题讨论】：

对我来说似乎是不好的做法，但并不致命。
那不是 CSS 而是 JavaScript，使用 jQuery 库。
@Vimq1987：你是说 Javascript 吗？正如 Kobi 所说，这是 OnClient 事件中的 javascript 库代码。
@Kobi：我的错，其他地方还有一些嵌入式 CSS。我编辑了答案
好...坏...我们在不知道应该做什么的情况下判断谁...

标签： c# javascript asp.net css refactoring

【解决方案1】：

我相信很多人已经给出了为什么这是一种可怕的方法的充分理由。它确实有效，很多事情也有效，但这并不意味着你应该继续这样做。

我将在此处插入 my own blog 并设计一个解决方案来阻止您编写这种特殊类型的代码，因为我曾经在自己没有更好的解决方案的情况下做这样的事情。

在我的博文中，我还链接到我不久前提出的一个 SO 问题。它展示了如何使用它来完全避免这种类型的依赖。如果您发现很难理解我的意思，我也很乐意回答任何重新评分此方法的问题。

【讨论】：

【解决方案2】：

这段代码调试起来会很烦人。您询问了一个更好的解决方案，看来这里所做的一切都可以用 javascript 来完成。

如果您绝对需要 C# 逻辑来执行此操作，我会将所有 javascript 代码包装到一个函数中，并从您的代码隐藏中专门调用该函数。

【讨论】：

【解决方案3】：

第一个示例实际上是在触发 click 事件时运行 javascript (jQuery)。第二个只是添加内联样式。我敢打赌，这种方法被用来获取客户端 ID 引用（这在 .net 4.0 之前是很困难的）——不过，还有其他方法可以使用纯 javascript 来获取它。

有些人会说没关系，有些人会说这是不好的做法和丑陋的。这真的取决于你的编程风格。而且绝对不会致命。

优点： - 不需要单独的文件 - 更快的开发（可以说）

缺点： - 没有明确的层分离 - 随着项目变得越来越大，难以维护和调试

可能还有更多，但我现在能想到的就这些了。

就我个人而言，我会远离这种代码。它使调试和维护变得更加复杂，并且对于接触您的代码的其他程序员来说不容易理解（尤其是如果您有仅使用 javascript 和仅使用 C# 的程序员）。但它没有什么是经验丰富的程序员无法处理的，尤其是在小型项目中。

【讨论】：

【解决方案4】：

我的回答是一些问题：

什么是更好的内联样式或将它们放在 css 文件中
最好将 javascript 与 HTML 混合或将它们放在 js 文件中

有很多东西可以回答这些问题以及因不同场景而异的一些注意事项。

简短的回答：混合使用是一种不好的做法。喜欢 css 类而不是内联样式。您还可以使用 jquery 的选择器将动态行为附加到基于 css 类或 id 的 html 元素。此外，您可以根据包含关系有不同的行为。

【讨论】：

【解决方案5】：

正题：

上面的代码不好吗？

糟糕，在“糟糕的编程实践”的意义上，是的。绝对不好。

更好的方法是什么？

更好的方法是将代码拆分为

事件生成组件（你不必担心这个）

事件监听器（您必须编写代码）

为什么这是一种更好的方法？

因为它良好的编程习惯，这带来了很多优势。这本身就是一门学科，现在所有的毕业生都必须学习。 :D

【讨论】：

“为什么它是更好的方法？” -> “因为它是良好的编程习惯”是一个循环论证。这个问题很有趣，因为许多现代系统——Web 组件浮现在脑海中——与这种传统智慧背道而驰。分离代码就像采用将配置放在 /etc、代码放在 /lib 和数据放在 /var 中的传统方法，而是将所有内容放在一个名为 /my-app 的目录中。两种方式都有优势。真的必须看细节才能看到在每种情况下哪个获胜，imo。

【解决方案6】：

第一个示例实际上是在触发 click 事件时运行 javascript (jQuery)。第二个只是添加内联样式。我敢打赌，这种方法被用来获取客户端 ID 引用（这在 .net 4.0 之前是很困难的）——不过，还有其他方法可以使用纯 javascript 来获取它。

有些人会说没关系，有些人会说这是不好的做法和丑陋的。这真的取决于你的编程风格。它绝对不是致命的。

优点： - 不需要单独的文件 - 更快的发展（可以说）

缺点： - 没有明确的层分离 - 随着项目越来越大，难以维护和调试

可能还有更多，但我现在能想到的就这些了。

就我个人而言，我会远离这种代码。它使调试和维护变得更加复杂，并且对于接触您的代码的其他程序员来说不容易理解（尤其是如果您有仅使用 javascript 和仅使用 C# 的程序员）。但这没有什么是经验丰富的程序员无法处理的，尤其是在小型项目中。

【讨论】：

【解决方案7】：

我能想到几个问题，但不是致命的。

不分先后：

您无法在服务器或客户端缓存 JavaScript 文件。
您增加了页面的边。如果每个按钮都嵌入了大量的 JavaScript，那么页面大小和加载时间就会增加。
调试将变得极其困难。
UnobtrusiveJavaScript 是你的朋友！
维护变得更加复杂，因为您需要记住硬编码 JavaScript 字符串在 C# 代码中的位置。
Intellisense 丢失。 Visual Studio 有一个很棒的 JavaScript 编辑器，你会因为对字符串进行硬编码而失去所有这些功能
我有没有提到Unobtrusive JavaScript 是你的朋友！
您将失去功能分离的好处。
如果您有相同功能的重复按钮，那么您就有重复代码。

我确定我错过了很多。

【讨论】：

【解决方案8】：

这不是 CSS，而是 JavaScript，使用 jQuery 库。你怀疑是对的，这段代码有几个“smelly”部分：

使用OnClientClick 会产生onclick="" 属性，这不如绑定事件好。这是动态完成的，表明它会发生多种类型。
background-color 的使用和硬编码 - 一个 CSS 类会好得多，这种颜色可能在代码或 CSS 文件中重复很多次，并且需要进行大量工作来更改（重新部署站点代码，而不是依赖资源文件）。更好的方法是使用CssClass：
```
imageDiv.CssClass = "imageDiv";
```
并在您的 CSS 文件中：
```
.imageDiv { width: 70px; height: 50px; text-align: center; padding-top: 5px; }
```
这使您可以轻松更改设计，并在其上下文中具有最佳样式的不同imageDiv（例如，当它在侧边栏中时，它可以更小，使用选择器.sidebar .imageDiv）
在 JavaScript/CSS 中使用 String.Format 并不美观。例如，这在 JavaScript（并且支持 jQuery）中有效：.css({'color': '#FBFBFB', 'border-color':"green"})。使用此代码，应将其编写为 .css({{'color': '#FBFBFB', 'border-color':""green""}}) - 为字符串转义双引号，为 String.Format 转义花括号。
正如您所提到的，没有分离数据/呈现/行为。

【讨论】：

+1 投票支持第三个理由。这实际上是我的错误，我使用 Resharper 转换为 String.Format :-s
@Vimvq1987 - 同样，这些本身都不是错误，但有些违背了最佳实践。有时更好地使用 String.Format（这里是边界线，带有一些字符串），但它引入了一个新的错误，您可以犯 - 错误地使用花括号。

【解决方案9】：

我不喜欢在代码中嵌入 CSS。在我看来，在这两种情况下，更好的方法是向元素添加一个类，然后将 CSS 放入 CSS 文件中。在您的第一个示例中，背景颜色用javascript改变，我会添加一个类“.addClass（'selected'）”（或toggleClass），其名称是有意义的。在第二个示例中，删除 CSS 并添加一个类。Attributes.Add("class", "xxx")。

您的 CSS 文件将包含如下内容：

.selected {
    background-color: #FBFBFB;
}
...

我不喜欢在 c#/javascript 中处理颜色/边框等，因为随着项目的发展，您的演示信息最终会到处乱窜，更改或覆盖颜色变得很困难。

【讨论】：

+1 没错，CSS 存在于外部。 “哦..更新按钮宽度”不再是一件苦差事，而是编辑所有这些内联声明！

【解决方案10】：

以这种方式实现此 JQuery 的原因很可能是由于必须引用服务器端控件 ID (_hiddenImageNameClientId, _hiddenPathClientId)，在 .NET 4 之前，这需要一些工作。（见Client Ids in .NET 4)

就“正确性”而言，我认为这是不恰当的，因为我更希望在 javascript 中看到一个定义良好的客户端层来定义这个点击事件。混合服务器端和客户端代码对我来说“闻起来很糟糕”并破坏了 SoC IMO。

【讨论】：

SoC 是什么意思？谷歌对此有很多定义。

【解决方案11】：

生成的代码实际上是 Javascript，虽然它操作了一些元素的 CSS。

我想说最好的方法是在页面加载时执行它。如果您只需要将函数绑定到点击事件，您可以在 Javascript/JQuery 中完成所有操作，如下所示：

$("#<%= this.TheButton.ClientID %>").click(function () {
    $("...").css("...", "...");
    // ...
});

我怀疑 ASP.NET 目前只是简单地生成一个带有 onclick=... 的按钮，这通常被认为是 Javascript 编程的坏习惯，但这并不是一个大问题。

在我看来，这里的普遍问题是视图和模型逻辑可能混合在一起，但在传统的 ASP.NET 中很难避免。

【讨论】：