3

我认为，一种理想的方式是 CSS 只处理文档的表示方面，因此 CSS 和 Javascript 是解耦的，这是一个非常干净的解决方案。我们可以更改任何 CSS 或任何 Javascript 而不会破坏另一个。

但是如果我们实现花哨的用户界面，比如搜索框中的灰色单词，一旦用户在框中点击就会消失，这种行为呢？在这种情况下，CSS 和 Javascript 是非常耦合的，更改 CSS 会在某些地方影响 Javascript，并且很难处理，因为在一个项目中，可能有 5000 行 CSS 和 8000 行 Javascript，并且需要逐个搜索其他的下来并将它们一起更改可能会使其出现故障且难以维护。有没有更好的方法或方法让它更干净？

4

5 回答 5

2

在某些方面它更好，而在某些方面更糟，但您可以在您的 javascript 中添加 CSS。例如，许多 jquery 插件将所有需要的 CSS 作为脚本的一部分创建，这意味着所有内容都在一个地方。

这更好，因为 CSS 文件和 JS 文件是不同的，但它涉及将演示文稿移动到您的 JS 层。

于 2011-04-03T16:25:59.343 回答
2

IMO，文本框中的灰色单词纯粹是表现性的而不是行为，因此使用 CSS 来做到这一点非常好。如果您尝试在 Javascript 中实现这样的 UI，那将是一种混乱的演示行为。

如果你有 5000 行 css，你可能会遇到不同的问题。

于 2011-04-03T16:27:39.963 回答
2

HTML 5 带来了一些功能（例如搜索框上的灰色文本，或新的输入类型）以尝试使其更简洁，但是，是的，我知道你的意思。让我们记住微软不久前统治了网络，并把它搞得一团糟，添加了诸如blink和markee（或者是Netscape？）之类的标签，以及.htc（IE行为）和ActiveX之类的技术。

有许多技术可以在网络上开发，但客户端我认为 CSS 和 Javascript 是你唯一的选择，所以我想这完全取决于你如何编写代码，并尝试使用最新的规范（尽管兼容性会变成一个问题...）

祝你好运，如果你发现了什么，请不要犹豫，让我们知道！:D

于 2011-04-03T16:29:42.433 回答
1

HTML4 和 CSS 2 没有实现实现您所描述的所需的语义，因此您最终使用 javascript 来解决这些问题。

正如您所描述的那样，HTML5 和 CSS3 具有更好的分离层的实现，让 CSS/HTML 处理 UI，Javascript 处理逻辑。通过引入例如 HTML5 'placeholder'、'required' 输入属性和 CSS3 高级选择器和内容属性，您可以获得更好的结构。

现在，尽可能使用不显眼的 js，也许使用 5000 行 CSS，考虑将 CSS 和 javascript 拆分为更易于管理的块。

于 2011-04-03T16:32:28.577 回答
0

我不认为问题在于 CSS 和 Javascript 的紧密耦合，问题在于正确使用 CSS。如果您有一段与特定功能紧密耦合的 CSS（例如您的灰色框），那么您不应该在其他任何地方重复使用它。如果它的某些部分在整个站点中共享（如基本样式）和特定于该元素功能的部分，那么您应该将该类分成两部分。

CSS 有两个用途 - 样式和标识应该出现和功能相同的元素。因此，如果更改一个类破坏了某些东西，那么你就是在滥用一个类，或者应该创建另一个类。这不仅仅是造型，它是胶水。

与面向对象编程的类比是创建继承类。如果您有一个在一个地方使用的类，并且您需要在另一个地方做一些稍微不同的事情，那么您不会更改该类，您将为您的新情况创建一个继承的类，而原始类不受影响。在 CSS 中，您将创建另一个类并将样式类和特定于功能的类应用到您的灰色消失框。如果要更改基本样式，则可以安全地更新仅处理该样式的类。如果您需要处理特定的灰色框，则只能使用该功能独有的类。

于 2011-04-03T16:35:06.380 回答