CSS和Javascript结合得太紧（CSS不仅仅是演示，而是由UI和JS使用），如何改进呢？

Question

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

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

Answer 1

在某些方面它更好，有些更糟糕，但你可以在你的JavaScript中添加CSS。例如，许多jquery插件创建了作为脚本一部分所需的所有CSS，这意味着整个批次都在一个地方。

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

Answer 2

IMO，文本框中的灰色单词纯属表现性而非行为，所以使用CSS来做到这一点非常好。如果您尝试在Javascript中实现此类UI，那么 会使呈现行为变得混乱。

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

Answer 3

HTML 5带来了一些功能（例如搜索框上的灰色文本或新的输入类型）以尝试使其更清晰，但是，我知道你的意思。让我们记住，不久前微软在网络上占据了主导地位，并且在其中引起了很大的混乱，添加了诸如眨眼和市场（或者是Netscape？）以及.htc（IE行为）和ActiveX等技术。

网上有很多技术需要开发，但客户方面我认为CSS和Javascript是你唯一的选择，所以我想这一切都取决于你如何编写代码，并试图使用最新的规范（尽管兼容性然后成为一个问题...）

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

Answer 4

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

HTML5和CSS3有更好的实现，可以像你描述的那样分离层，让CSS / HTML处理UI，Javascript处理逻辑。 通过引入HTML5“占位符”，“必需”输入属性以及CSS3高级选择器和内容属性，您可以实现更好的结构。

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

Answer 5

我不认为问题是CSS和Javascript的紧密耦合，问题是正确使用CSS。如果你有一块与特定功能紧密结合的CSS（比如灰盒子），那么你不应该在其他任何地方重复使用它。如果有部分内容在网站上共享（如基本样式）和特定于该元素功能的部分，那么您应该将该类拆分为两个。

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

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