Orthogonality and CSS in JS

One of the realities of the constant change in the web development world is that “best practices” are often hotly contested. One issue that the front end community doesn’t seem to have come to a consensus on yet is how tightly to bundle JavaScript, HTML and CSS in code. Should they be bundled and managed completely separately? Kept in different files and imported together into JavaScript component files? Or can we remove HTML and CSS files entirely and generate everything in JavaScript? This is a discussion that still comes up all the time in my.

Thank you for reading this post, don't forget to subscribe!

Many new frameworks that encourage a component based architecture (including React, Vue, and Angular2 [1]) provide affordances for including HTML and CSS directly in JavaScript, but those solutions are not yet used universally. Many people are still very happy keeping CSS bundled separately. I have no idea what the best solution is. But I am interested in how people talk about the problem. One major argument I have seen from people advocating both sides is that their preferred approach encourages good “separation of concerns”.

I’d like to take a deeper look at this and give some vocabulary that can hopefully help anyone working through discussions on how to manage CSS for components. I’ll focus specifically on CSS since frameworks tend to be more agnostic to how it is blended with JS than they are about HTML, and on components since that is the main context in which people are arguing for blending of css. For this piece, I’ll consider a component to be a set of HTML, CSS, and JavaScript that combine to form a reusable piece of UI [2].

Read Full Article

By benmccormick.org

Leave a Reply

Your email address will not be published. Required fields are marked *