Front-End Web Development: Why would it be better to dynamically apply CSS classes with jQuery as opposed to writing multiple media queries?

First, let's cover why they're useful... jQuery-driven classes Used for defining visual state. e.g. Set a class on a parent element and the CSS can style the parent and all descendant elements. Great for 'class-tweening' or animating between states. Classes as an event manager. If you have a series of event handlers waiting for elements with specific classes, you could attach the class to the element and the event handlers would kick in (or finish). Classes can be added based on arbitrary rules - e.g. add classes to the elements that exceed a given datapoint. CSS Media Queries Mainly for controlling the visual aspects of the user interface and its content Useful for revealing or hiding functional aspects of the UI based on simple device capabilities. Less links in the chain - just needs HTML, therefore more reliable. Media Queries are applied earlier in the rendering process than jQuery-driven classes. Self-contained and therefore modular. Only needs the accompanying HTML. Now let's look at where these two strategies go head-to-head. Common reasonsAs you see above, the major overlap between the two strategies is when you want to control (mainly visual-) aspects of the UI based on the physical aspects of the consuming device. The right tool for the right jobIf you had to pick between the two, picking the right strategy has a number of factors in play (as illustrates): Who will be authoring and maintaining this strategy? e.g. Developers grok jQuery but sometimes struggle with media queries. What browsers (and therefore devices) are involved? What are their capabilities? (CPU, Memory, Screen size, GPU, etc) What else needs to be achieved at the same time? e.g. Media Queries can't add event handlers or load extra content not present in the document. How critical is it to be rendered immediately? How critical is it to have less moving parts? Less important: How modular or interchangeable must it be? Can you copy it easily from another project? On performancePerformance always used to be about bytes and HTTP requests, but these days the most important factor in Web Performance is perceived performance. i.e. How quickly does it render? Does it look fast? With that in mind, pushing what you can into CSS Media Queries can have a noticeable improvement in perceived performance, especially if you're working on a traditional web app (and not a Client-side Web App, e.g. AngularJS) As the CSS has been completely parsed, the browser starts painting. With any use of script, you're going to have to wait for these scripts (such as jQuery) to be parsed and executed on top of the CSS. hth, -S

To add to the existing answers, there will be severe search engine crawling issues. Add to that the performance penalty to go through the JS parser before even painting the basic content. Your approach essentially violates the logic behind the basic rule: CSS at the head, JS at the bottom.