Built-in, single file, scoped CSS

[rodrigocfd]

One of the great improvements Vue brought over React is the built-in scoped CSS. You don't need any external libraries but SASS.

I'm aware that Solid plays well with Vite's CSS modules support. This is great when you have large CSS code, but it's too much when you just need 1 or 2 styles.

So...

I wonder if something like this could be baked into Solid:

function Foo() {
	return <div scopedCss={myShit}>
		<div class='name'>
			<div class='nested'>Hello</div>
		</div>
	</div>;
}

const myShit = `
	.name {
		background-color: gray;
		border: 1px solid red;

		.nested {
			color: green;
			font-style: italic;
		}
	}
`;

[micnic]

Scoped CSS is out of the scope of Solid (pun intended).
You can achieve this with tailwindcss, no need to add a CSS in JS solution inside Solid.

[rodrigocfd]

I strongly disagree.

First, because Tailwind is just glorified inline CSS – I can see the appeal for beginners, but in large projects it quickly becomes a maintenance nightmare.

Second, because Vue 3 is a great example of how CSS in JS can be done with elegance, primarily to provide scoped class names. Having something like that in Solid would be incredibly useful. And it's something that – just like Solid's reactivity –, React lacks (pun intended).

[micnic]

Both Scoped CSS (or any CSS in JS solutions) and tailwindcss are preferences to work with CSS, both have their own pros and cons. What I was trying to say is that Solid is focused on other stuff, reactivity and rendering.

Ok, we can add scoped CSS, but where should we stop? Maybe I want a way to work with REST APIs in Solid, let's add a solution for this, but maybe I want to work with WebSockets, let's add this too. I want to make games in Solid, let's add a solution for 2d and 3d graphics rendering, we can continue the list for a lot of cases. I don't see a reason Solid to become a copy of Vue, even if it is great (Vue is great).

I personally do not like tools bloated with a lot of features, that are opinionated or that you are somehow forced to learn and use, when there are alternatives that you can connect as dependencies. For your specific case you can try emotion-solid.

[o-t-w]

The way of approaching CSS in Svelte and Vue is really nice imo. By contrast React has a confusing and overwhelming amount of CSS-in-JS options. Solid is a framework for building UI and CSS is an intrinsic part of a UI so it should have a default styling story.

Emotion/Styled Components etc have a runtime. AFAIK the built-in CSS approach of Vue and Svelte has no runtime, which is the approach that Solid should take.

There is a lot of value in being a "batteries included" framework and having an officially maintained approach.

I don't dislike Tailwind but saying "just use Tailwind" isn't good enough imo.

[micnic]

I have the bad experience of working with a framework with "batteries included" for a lot tasks (Meteor.js), it was great back in the day, but now there are better, specialized tools for everything it has included. "Batteries included" tools are great to start something, you do it fast and have less friction to decide what to use and where, but this comes at a high price later when the app grows and has some needs that are outside the selected framework, or some parts of the framework needs to be done differently.

My message is that I'd like to keep Solid as small as possible, so that it has a focused scope where it performs very well, rather than including a lot of features that perform worse. Tools with a broader scope are developed slower, have (a lot of) breaking changes with every major release. On the other hand, more specialized tools, like react, can be developed faster and do not have painful breaking changes (react 16, 17 and 18 for example).

I'll have to agree that there is an overwhelming amount of CSS-in-JS solutions for react, but the whole JS world is full of very competitive alternatives for almost anything. This is the gift and the curse of narrow-scoped tools. For myself I decided to select a CSS solution that can be used with any frontend framework or even without any, that does not need to learn a new domain-specific language and easy learning resources. Based on these principles I chose tailwindCSS, which seems to fit my needs perfectly, even solid-templates provide an fast and easy way to use it with Solid.