Select Page

Category: css-in-js

The Many Ways to Include CSS in JavaScript Applications

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. 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. 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. Preconceived notions about this topic aside, let’s take a look at the fascinating world of CSS architecture! Let us count the ways Simply Googling “How to add CSS to [insert framework here]” yields a flurry of strongly held beliefs and opinions about how styles should be applied to a project. 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. Option 1: A dang ol’ stylesheet We’ll start off with what is a familiar approach: a dang ol’ stylesheet. We absolutely are able to to an external stylesheet within our application and call...

Read More

Regarding CSS’s Global Scope

html { font-family: Roboto, sans-serif; } With the except of some form elements, you’ve just set a font on every bit of text on a site! Nice! That’s probably what you were trying to do, because of the probably hundreds of elements all over your site, setting that font-family every time would be tedious and error-prone. CSS is global by nature. On purpose! I like how David Khourshid put it: You ever stop and think about why CSS has a global scope? Maybe we want to use consistent typography, colors, sizing, spacing, layout, transitions, etc. and have our websites & apps feel like one cohesive unit? Love the cascade, the cascade is your friend. And yet. The global nature of CSS is perhaps the most-pointed-at anti-feature of CSS. Some people really don’t like it. We all know it’s very easy to write a single CSS rule that has implications all over a site, breaking things you really didn’t want to break. Two CSS properties walk into a bar. A barstool in a completely different bar falls over. — Thomas Fuchs 🎄🕹💾 (@thomasfuchs) July 28, 2014 There are whole new categories of testing to assist with these problems. Scoped styles aren’t the only reason there is such interest and adoption in the landscape of tools that is CSS-in-JS, but it’s a big one. There are loads of sites that don’t...

Read More