Declare CSS within a component

[baraqkamsani]

Currently, styling is split from a file.

In SomeComponent.astro, we have this:

---
// ...
---

<SomeComponent>
<!-- ... -->
</SomeComponent>

In index.css, we have this:

/* ================================================================= */
/* /src/components/SomeComponent.astro */

/* Styling Here */

/* ================================================================= */

Is it better if we place the style declarations within the component/layout? Like so:

---
// SomeComponent.astro
// ...
---

<SomeComponent>
<!-- ... -->
</SomeComponent>

<style>
/* Styling Here */
</style>

Any other suggestions to help with maintenance/workflow is welcome and appreciated 🙂

[Unknown-bot-sus]

Yes I think this approach will be better as the css will be scoped to that component and will solve most of the name collision. But I am still bias to using tailwind css.

[baraqkamsani]

scoped to that component

For site-wide components like header and footer we can use <style is:global></style> to bundle everything into our main css file. Page-specific components like the blog card only appears in /index.html and /posts/index.html. We can use a scoped <style></style> in such cases.

---

using tailwind css.

We'll wait for better support from PostCSS's plugin for UnoCSS. It has built-in support for Tailwind.
In the meantime I suggest we make a simple utility stylesheet file:

/* utility.css or utilities.css */

.hidden {
	display: none;
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

.DEBUG { outline: 1px solid red; }
.DEBUG > * { outline: 1px solid blue; }
.DEBUG > * * { outline: 1px solid green; }