CSS 和 Javascript 耦合太紧密（CSS 不仅仅是演示，还被 UI 和 JS 使用），如何改进？
我认为，理想的方法是 CSS 只处理文档的表示方面，因此 CSS 和 Javascript 是解耦的，这是一个非常干净的解决方案。我们可以更改任何 CSS 或任何 Javascript，而不会破坏彼此。
但是，如果我们实现奇特的 UI，例如搜索框中的灰色单词，一旦用户单击该框，该单词就会消失，这种行为会怎样呢？在这种情况下，CSS和Javascript是非常耦合的，改变CSS会影响Javascript的某些地方，并且很难处理，因为在一个项目中，可能有5000行CSS和8000行Javascript，并且需要逐一搜索其他的下来并一起改变它们可能会导致错误并且难以维护。有没有更好的方法或方法可以使其更干净？
I think supposedly, an ideal way is that CSS only deals with presentation aspect of a document, and so CSS and Javascript are de-coupled and it is a very clean solution. We can change any CSS or any Javascript without breaking the other.
But what if we implement fancy UI, such as grayish words in a search box, and the word will disappear once the user clicks in the box, those type of behavior? In such cases, CSS and Javascript are very coupled and changing CSS will affect the Javascript some where, and it is hard to handle because in a project, there can be 5000 lines of CSS and 8000 lines of Javascript, and the need to hunt each other down and change them together can make it buggy and hard to maintain. Is there a better way or ways of doing it so that it is more clean?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
IMO，文本框中的灰色单词纯粹是表示性的，而不是行为，所以使用 CSS 来做到这一点是完全可以的。如果您尝试在 Javascript 中实现此类 UI， 的呈现行为就会变得混乱。
如果你有 5000 行 css，你可能会遇到不同的问题。
IMO, greyish words in a textbox is purely presentational not behavior, so using CSS to do that is perfectly fine. If you try to implement such UI in Javascript, that is muddying behavior for presentation.
If you have 5000 lines of css, you probably have a different problem.
HTML 5 带来了一些功能（例如搜索框上的灰色文本或新的输入类型）来尝试使其更清晰，但是，是的，我知道你的意思。让我们记住不久前，微软统治了网络，并把它弄得一团糟，添加了诸如眨眼和markee（或者是Netscape？）之类的标签，以及诸如.htc（IE行为）和ActiveX之类的技术。
有很多技术可以在网络上开发，但客户端我认为CSS和Javascript是你唯一的选择，所以我想这一切都取决于你如何编写代码，并尝试使用最新的规范（尽管兼容性然后变得一个问题...）
祝您好运，如果您发现任何问题，请随时告诉我们！ ：D
HTML 5 brings some functionality (such as the gray text on the search box, or new input types) to try making it cleaner, but yeah, I know what you mean. Lets just remember Microsoft dominated the web not too long ago, and made quite a mess out of it, adding tags such as the blink and markee (or was that Netscape?), and technologies like .htc (IE behaviors) and ActiveX.
There are a number of technologies to develop on the web, but client side I think CSS and Javascript are your only options, so I guess it all depends on how you write your code, and trying to use the newest specifications (although compatibility then becomes a problem...)
Good luck, and if you find something out, don't hesitate on letting us know! :D
HTML4 和 CSS 2 没有实现实现您所描述的内容所需的语义，因此您最终将使用 javascript 来解决这些问题。
HTML5 和 CSS3 有更好的实现来分离您所描述的层，让 CSS/HTML 处理 UI，让 Javascript 处理逻辑。
通过引入 HTML5“占位符”、“必需”输入属性以及 CSS3 高级选择器和内容属性，您可以实现更好的结构。
现在，尽可能使用不显眼的 js，也许使用 5000 行 CSS，考虑将 CSS 和 javascript 分成更易于管理的块。
HTML4 and CSS 2 don't implement the semantics needed to achieve what you describe, therefore you are ending up using javascript to solve these issues.
HTML5 and CSS3 have much better implementation for separating the layers as you describe, have CSS/HTML handle the UI and Javascript handle the logic.
With the introduction of for example the HTML5 'placeholder', 'required' input attributes and the CSS3 advanced selectors and content properties you are able to achieve a much better structure.
For now, use unobtrusive js where possible and maybe with 5000 lines of CSS, consider splitting your CSS and javascript in more manageable chunks.
我不认为问题在于 CSS 和 Javascript 的紧密耦合，问题在于正确使用 CSS。如果您有一段与特定功能紧密耦合的 CSS（例如灰色框），那么您不应该在其他地方重复使用它。如果它的某些部分在整个站点上共享（例如基本样式），而某些部分特定于该元素的功能，那么您应该将该类分成两个。
CSS 有两个目的 - 样式化和标识应看起来和功能相同的元素。因此，如果更改某个类会破坏某些内容，那么您就滥用了该类，或者应该创建另一个类。它不仅仅是造型，更是胶水。
面向对象编程的一个类比是创建继承类。如果您有一个在一个地方使用的类，并且您需要在另一个地方做一些稍微不同的事情，那么您不会更改该类，而是会为您的新情况创建一个继承的类，而使原始类不受影响。在 CSS 中，您将创建另一个类，并将样式类和特定于功能的类应用到灰色消失框。如果您想更改基本样式，那么您可以安全地更新仅处理该样式的类。如果您需要处理特定的灰框，则只需使用该功能特有的类。
I don't think the problem is tight coupling of CSS and Javascript, the problem is correctly using CSS. If you have a piece of CSS that is tightly coupled with a particular function (like your grey box), then you should not be re-using it anywhere else. If there are parts of it that are shared across the site (like the basic style) and parts specific to the functionality of that one element, then you should split the class into two.
CSS serves two purposes - styling, and identification of elements that should appear and function the same. So if changing a class breaks something, then you are misusing a class, or should have created another one. It's more than just styling, it's glue.
An analogy to object oriented programming would be creating inherited classes. If you had a class that was used in one place, and you needed to do something slightly different in another place, you wouldn't change that class, you would create an inherited class for your new situation, leaving the original unaffected. In CSS you would create another class and apply both the style class, and the one specific to the functionality, to your grey disappearing box. If you want to change the basic style, then you can safely update the class that only handles that. If you need to work on your specific gray box, you work only with the class that's unique to that piece of functionality.
在某些方面它更好，有些则更糟，但您可以在 javascript 中添加 CSS。例如，许多 jquery 插件都会创建脚本所需的所有 CSS，这意味着所有内容都集中在一个地方。
这更好，因为 CSS 文件和 JS 文件是不同的，但它涉及将表示移动到 JS 层。
In some ways it's better, and some worse, but you could add the CSS in your javascript. Many jquery plugins for instance create all CSS needed as part of the script, meaning that the whole lot is in one place.
This is better because the CSS files and JS files are distinct, but it involves moving presentation into your JS layer.