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.

  • What is an example of something that can't be done with CSS? Something that requires dynamic calculation of sizes? – Thomas Dignan Nov 22 '11 at 20:40
  • 1
    @user19204 Added a note - Dynamic heights and vertical flow are tough, since HTML uses horizontal flow. – Nicole 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

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.


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.

  • 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? – Nicole Nov 22 '11 at 21:12
  • This is not at all true. CSS does not describe the structure of the view, it only styles it. The structure of the view is your HTML; or nowadays, it's your React, which is actually JS ;) – Andy Jan 27 '16 at 10:13
  • @Andy, you're thinking in the context of a full app. This post is discussing MVC in the context of an individual web page. A view is a description of how data (the model) should be rendered, which is exactly what CSS does. The controller changes the state of the model which then is again rendered by the view (JS). If you separate your concerns properly, keeping your styles in CSS, your interactions in JS and your data in HTML everything will be simpler. – zzzzBov Jan 27 '16 at 14:27
  • @zzzzBov fair enough – Andy Jan 27 '16 at 21:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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