styled-components VS styled-jsx

I'm not sure if this is a response to my comment about styled-components. If so, styled-components is something specific. https://styled-components.com/ (Emotions library also has this as an option too). It's not just a wrapper. And you wouldn't be able to use it in conjunction with bootstrap classes unless you took additional steps in the setup. But nevermind about this. It's not necessary, I was just taking a guess as to what code you were referring to.

As already mentioned in the previous section, a certain flavor of functional programming can be quite elegant in JavaScript. The simplicity of the object model makes it very convenient to organize and operate on data. Dynamic typing and type coercion allows you to take certain shortcuts (unless you are trying to sort a list of numbers...). Use the strengths of whatever language you are using to your advantage. It is good to push the boundaries of the language to create new things. For example, styled components and GraphQL have normalized the use of tagged template literals for domain specific languages (DSLs). But in general, you'll have a much better time working with the grain of the language than against it.

I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.

You could checkout styled-components which allows you to make components and add css to them in javascript. With this, you can create variants, and wherever you need a specific variant, just create a prop called variant, and pass in which specific style of component you need. Note you do need the babel-plugin-styled-components for it to work in nextjs

Yo it dis style components (and they rock)

Let's face the fact that this calculation is not straightforward and hard to read, even when you are familiar with the technique. Luckily for us, we can extract SASS mixins, or utility functions for various CSS-in-JS libraries (like styled-components).

styled-components for styling needs

This article aims to explain how we could use react-hot-toast and styled-components to create some beautiful-looking toast messages 😉

On bergqvist.it I used styled jsx for styling my components. I preferred that to other css-in-js frameworks (like JSS) because of it actually using CSS syntax instead of JavaScript objects.

"style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" } ] } }, ...

styled-jsx; it's vanilla CSS (in JS) with built-in scoping/CSS modules. Pretty happy with it, aside from the occasional specificity bug. Goes nicely with our React (Next.js) code base.

I used to not like CSS in JS until I worked with style-jsx, which imo is a lot better than styled-components and a lot of other CSS in JS libraries. If you know CSS, you can literally pick this up in just a few minutes and start using it.

https://github.com/vercel/styled-jsx#syntax-highlighting

What would happen if you used a to style a component which is already styled internally? Would precedence work correctly, or would the outer style have to artificially bump selector precedence?

styled jsx handles this—you have to use css.resolve instead of an ordinary style tag to customize/override a component's styles.

I’m not actually sure what you mean by “inline critical css”. But I also am curious? Can you point me to the place in the styled-jsx docs?

I may be wrong here, but I think styled-jsx inlines "critical-path CSS" when you set optimizeForSpeed: true in its configs. But that may not be the case and it may just be other optimizations.

I like this part, though:

“starting here, and ending here, there is styling happening”

That sounds intuitive—like a hybrid of styled-components and styled-jsx.

And so, his recommendation is to use styled-jsx which is pretty much abandoned (despite of what they say) [1] and not even themselves are using it [2]

[1] https://github.com/vercel/styled-jsx/issues/688

If you're a fan of styled components, check out styled-jsx. It's better in almost every way, imo, and was made by the folks over at Vercel (Next.js). Your CSS is written inside a template literal string (just like with styled-components) but inside JSX. It's super easy to learn and more developer-friendly than styled-components because there are no weird prop callback patterns to learn. Everything is just CSS.

Not sure about styled-components, but libraries like styled-jsx are actually really fast. The critical CSS is loaded on demand and inlined for performance. It also combines the best of both worlds: CSS in JS, but also with CSS modules built in (so that your CSS in one component doesn't tamper with styles anywhere else).