![javascript includes javascript includes](https://bootstrapstudio.io/assets/img/tutorials/change-include-order-js/change-include-order.png)
Something to help us manage an application that requires a bit more of a nuanced approach. Additionally, a single CSS file is fairly easy for the browser to cache, so that returning users don’t have to re-download the entire file on their next visit.īut let’s say that we’re looking for a bit more of a robust CSS architecture that allows us to leverage the power of tooling. It provides clear separation between business logic and application styles, and because it’s not generated by our application, is fully within our control to ensure exactly what we write is exactly what is output. For a small application, or an application built by a team with less of a focus on the front end, a single stylesheet may be a good call. That’s not to say that this method doesn’t have its merits. (Sure, render-blocking isn’t always a bad thing, but for all intents and purposes, we’ll generalize a bit here and avoid render blocking scripts and styles wherever we can.) Depending on the complexity of that application, this file has the potential to get pretty bloated, hard to load asynchronously, and render-blocking for the rest of your application. No matter what compiler you decide to use (or not use) at the end of the day, you’ll be serving one CSS file that houses all of the styles for your application via a tag in the header. This requires a little bit of work within a webpack config to be properly set up, but something you can handle for sure! We could continue down this path and utilize the awesome power of PostCSS to write very modular CSS partials that are strung together via rules. We’ve experienced these issues before, and things like Sass (and PostCSS more recently) have been introduced to help us handle these issues
![javascript includes javascript includes](https://miro.medium.com/max/1400/1*nDitW4SVYAcSXA7UxHlzIg.png)
The cascade is also a beautiful thing, but it also becomes tough to manage in the sense that some styles you - or other devs on the project - write will introduce regressions into other parts of the application. Parsing thousands of lines of CSS that are responsible for styling your entire application becomes a pain for any developer working on the project. Nothing wrong with that at all, but as an application gets larger, and more complex, it becomes harder and harder to maintain a single stylesheet. We can write normal CSS that we’re used to and move on with our lives.
![javascript includes javascript includes](https://www.javascripttutorial.net/wp-content/uploads/2016/11/JavaScript-Array-Includes.png)
We absolutely are able to to an external stylesheet within our application and call it a day. We’ll start off with what is a familiar approach: a dang ol’ stylesheet. To try to help cut through some of the noise, let’s examine a few of the more commonly utilized methods at a high level, along with their purpose. Simply Googling “How to add CSS to ” yields a flurry of strongly held beliefs and opinions about how styles should be applied to a project. Preconceived notions about this topic aside, let’s take a look at the fascinating world of CSS architecture!
JAVASCRIPT INCLUDES FULL
Every project is different, and every method has its merits! That may seem ambiguous, but what I do know is that the development community we exist in is full of people who are continuously seeking new information, and looking to push the web forward in meaningful ways. I want to preface this post with a disclaimer: There is no hard and fast rule that establishes one method of handling CSS in a React, or Vue, or Angular application as superior. Welcome to an incredibly controversial topic in the land of front-end development! I’m sure that a majority of you reading this have encountered your fair share of #hotdrama surrounding how CSS should be handled within a JavaScript application.