Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Many, but not all, HTML layout problems can be solved with CSS alone.

For those that can't, JQuery (on document load) has become very popular.*

As a result of its ease, many developers are quick to use JQuery or Javascript for layout and style — even without understanding whether or not the problem can be solved with CSS alone.

This is illustrated by responses to questions like this one.

Is this bad practice? What are the arguments for/against? Should someone who sees this in practice attempt to persuade those developers otherwise?

If so, what are the best responses to arguments in favor of JQuery saying it's "so easy"?


* Example: Layouts that wish to use vertical layout flow of some kind often run into dead ends with CSS alone — this would include layouts similar to Pinterest, though I'm not sure that's actually impossible with CSS.

share|improve this question
    
What is an example of something that can't be done with CSS? Something that requires dynamic calculation of sizes? –  Tom Dignan Nov 22 '11 at 20:40
1  
@user19204 Added a note - Dynamic heights and vertical flow are tough, since HTML uses horizontal flow. –  NickC Nov 22 '11 at 20:51
    
Isn't something like Pinterest's layout as simple as display: inline; float: left on all of the div elements? (This is offhand, I haven't tested it) –  Izkata Nov 22 '11 at 22:08
    
@Renesis Check out Adobe's prototype of CSS3 Regions for WebKit: adobe.com/devnet/html5/articles/css3-regions.html It enables text to flow across "regions" (divs?) as you adjust a page's height and width. –  Adrian J. Moreno Nov 22 '11 at 22:14
    
@Izkata, you can't get dynamic columns like what Pinterest uses with pure css (yet). Check out Masonry for an example of this. –  zzzzBov Nov 22 '11 at 22:18

3 Answers 3

Ideally HTML is the structure of your page, CSS is for styling and javascript to dynamically alter any structure in your page.

Nowadays, with all the layers of abstraction on javascript (Jquery, prototype, etc) is easier to add or change style from javascript too, but it's definetly not a best practice.

On the other hand, other javascript frameworks appeared that help to create a full MVC structure from the client side (backbone, knockout, sproutcore, javascriptMVC, etc), so modifications in the model triggers the renderization of the view, all in javascript.

Leaving MVC aside, if you can't achieve your style correctly with CSS3, you are missing something ;)

share|improve this answer

HTML CSS and JavaScript are a nicely bundled MVC framework. HTML is the model, all your data belongs there, with some nice hooks for the view and controller. CSS is the View, all your styles belong there, possibly with some free-floating styles that can be applied by the controller. JavaScript is the Controller, all your interactions belong there, making use of hooks into the model and view (classes & ID's).

I talk about MVC too often.

share|improve this answer
    
That's a good principle to start with, but I'm looking for a little more... For instance, what constitutes appropriate manipulation of the view with the controller? –  NickC Nov 22 '11 at 21:12

If the problem can be solved using CSS, it shouldn't be solved in Javascript, and it's a definitely bad practice to do so:

  • I guess no one has JS disabled nowadays, but NoScript is probably not completely negligible
  • Harder to debug and maintain
  • Probably will introduce a noticeable and ugly effect when JS loads and "fixes" the layout

Of course, there are things which cannot be achieved in CSS alone. In that case, of course, JS is the right solution if you strictly need it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.