Is separation of Content, presentation and behavior possible every time?

Is separation of Content, presentation and behavior possible every time ?

Many time through javascript we add classes to html and we use in CSS visibility:hidden inline.

Should we always invest ti开发者_开发技巧me to keep all separate?

While it is usually possible, it is often not practical. As you say yourself, it costs time. Whether you are willing to invest that time is subject to many factors, of which purism is only one.

In fact, it can be argued (and I've witnessed it being argued first-hand) that since tags such as div or span don't carry any semantical meaning in and on themselves, but have been invented specifically for styling, the moment you use a single one of them on your page, you are already mixing content and presentation. This is a nice philosophical discussion to have, but in business context it leads nowhere.

So, while you should always try to separate content, presentation and behavior as much as possible, you will always have to stop somewhere, if only to get other things done.

Your question is quite too general for us to give you a definite answer.

But, as nothing is impossible, I would say that, yes, it is possible.

In the same time, I would say that :

• Sometimes, it'll cost so much that you won't do it
• Sometimes, it'll make things much harder than not separating, so you won't do it

One thing that isn't talked about too much is how to keep style out of your behavior - that is, style stuff like $('element').css({color: 'purple'}) out of your Javascript whenever possible. For reasons of code aesthetics as well as general sanity, I've found that it's way better to have code make style changes by having it update "class" values. In other words, don't think in the code that something should be "purple" — think that it should be "regal" or "distinctive" or "kind-of-ugly":

$('.sections li.updated').each(function() {
  // ...
  if (thingsLookRight) $(this).addClass('kind-of-ugly');
  // ...
});

Then your CSS can take over:

li.updated.kind-of-ugly { color: purple; }

Now you're free to make little style tweaks to "kind-of-ugly" whenever you want without having to mess up your Javascript. Make the font bigger, make it hidden, whatever; the logic and the action in the code stays the same.

Similarly, you can do awesome things by using parent/child class relationships in CSS to keep your behaviors simple, fast, and style-free.

I think that as conceptual separation, yes.