CSS and Javascript too tightly coupled (CSS is not just presentation but is used by UI and JS), how to improve this?

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?

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.

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 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 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.

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.