It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
This article is full of a bunch of data from Aggelos Arvanitakis. But lemme just focus on his final bit of advice:
… Read articleInvestigate whether a zero-runtime CSS-in-JS library can work for your project. Sometimes we tend to prefer writing CSS in JS for the DX (developer experience) it offers, without a need to have access to an extended JS API. If you app doesn’t need support for theming and doesn’t make heavy and complex use of the
cssprop,
There’s been a lot of well-deserved hype around Svelte recently, with the project accumulating over 24,000 GitHub stars. Arguably the simplest JavaScript framework out there, Svelte was written by Rich Harris, the developer behind Rollup. There’s a lot to like about Svelte (performance, built-in state management, writing proper markup rather than JSX), but the big draw for me has been its approach to CSS.… Read article
Some people outright hate the idea of CSS-in-JS. Just that name is offensive. Hard no. Styling doesn't belong in JavaScript, it belongs in CSS, a thing that already exists and that browsers are optimized to use. Separation of concerns. Anything else is a laughable misstep, a sign of not learning from the mistakes of the past (like the <font></font> tag and such.)
Some people outright love the idea of CSS-in-JS. The co-location of templates and functionality, à la most … Read article
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 … Read article
We just made a note about this article by Jeremy Wagner in our newsletter but it’s so good that I think it’s worth linking to again as Jeremy writes about how our obsession with JavaScript can lead to accessibility and performance issues:
… Read articleWhat we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints
The popularity of CSS-in-JS has mostly come from the React community, and indeed many CSS-in-JS libraries are React-specific. However, Emotion, the most popular library in terms of npm downloads, is framework agnostic.
Using the shadow DOM is common when creating custom elements, but there’s no requirement to do so. Not all use cases require that level of encapsulation. While it’s also possible to style custom elements with CSS in a regular stylesheet, we’re going to look at using … Read article
I'm never going to tell you that writing your CSS in CSS (or some syntactic preprocessor) is a bad idea. I think you can be perfectly productive and performant without any tooling at all. But, I also think writing CSS in JavaScript is a good idea for component-based styles in codebases that build all their components with JavaScript anyway.
In this article, Max Stoiber focuses on why to write CSS in JavaScript rather than how to do it. There is … Read article
Fair warning! This isn't a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don't. Sometimes it's my fault. Sometimes the docs are unclear. Sometimes changes have happened under our feet. We have to battle through it all.
We've got a little plan here. What we want to do … Read article
I'm joined by Dustin Schau in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than in .css files that you <link /> up in the head all on your own.
Dustin is a perfect guide for this, as he created a great exploratory tool called CSS in JS Playground and also has a brand new … Read article
html {
font-family: Roboto, sans-serif;
}With the exception 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:
… Read articleYou ever stop and think about why CSS has a