The idea of layering content within semantic markup (HTML) first, then responsive styles (CSS) next, then unobtrusive JavaScript next, so that each layer can be peeled off by devices that don’t support it without affecting layers beneath, is called Progressive Enhancement. It sums up the general best-practice web development strategy for how to manage the relationship of these technologies.
One of the possible further layers on top, even more advanced than JavaScript, is jQuery (a framework for JavaScript). The main thing to consider is to ensure jQuery within a webpage is not coded in a way that conflicts with other JavaScript code in such a way that can entirely destroy the interactive features of a website. This ‘safe’ use of jQuery is called ‘non conflicting jQuery’. It’s important to consider, because there is a trend in jQuery and other JavaScript libraries, to use shortcut lines of code beginning with a $ sign, like $(), which is short for typing jQuery(), and this frequently causes errors where other scripting libraries try to also use the popular $ sign at the start of each line of code. Technically this isn’t directly an SEO issue, but if we’re building sites from the bottom-most levels to the top for maximum accessibility and bug-free performance, which has a knock-on effect to SEO, then jQuery is a suitable thing to put at the top of the layers, and non-conflicting is one of the key best-practice considerations for implementing jQuery most accessibly & interoperably.
An evolution of Graceful Degradation
Progressive Enhancement is an evolution of Graceful Degradation, which is an older concept teaching to have something suitable underneath when you disable any level of technology, and this could be as simple as a message advising the user of the situation and recommending them to try a different browser, enable their JavaScript, etc. The best form of Graceful Degradation is of course to maintain maximum functionality with whatever level of technology the user has, and Progressive Enhancement is the ultimate strategy for realising this ideal.
Parallels with Mobile-First Design
Progressive Enhancement is strategically similar to the concept of mobile-first design. In the past, when nearly everyone used desktop computers, and some were newer than others, with greater resolution displays, sites would be built primarily for good modern computers, and the more accessible sites would be built to be compatible with smaller screens but still looked best on larger screens (using fluid width layouts, with floating columns for example). These days though, designing for mobile first, ensures the site looks perfect on mobile and consequentially it’s never going to look bad on desktop – at worst it’s merely going to be a bit simplistic/underdesigned, but if you put in enough work you can achieve great designs for larger screens too, it’s only that mobile screens become the priority primarily so that there’s no risk of anything looking seriously bad or being dysfunctionally disorganised.