Writing CSS in Fresh
Are there any alternatives in how we write CSS other than Tailwind-like (inline & abbreviated)?
I personally like the normal key-value & scoped styling. But it seems that tool like styled-components is an anti-pattern to Fresh.
7 Replies
I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, if you prefer to write CSS in a more traditional key-value and scoped manner, you might consider the following approaches:
1. CSS Modules: Fresh supports CSS Modules out of the box. You can create a
.css file and import it into your component. This allows you to write CSS in a traditional way while keeping it scoped to the component.
2. Inline Styles: While not always recommended for larger applications due to maintainability concerns, you could write inline styles directly in your JSX if you prefer to avoid utility-first CSS like Tailwind.
3. External Stylesheets: You can also link to external stylesheets in your Fresh project by including a <link> tag in the head of your document.
Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. Fresh is a relatively new framework, and best practices are still being established. If you have further questions or need more specific guidance, you might want to reach out to the Fresh community or check for updates in the official documentation and resources.Helpful Links:
Fresh 1.6: Tailwind CSS plugin, simplified typings and more
Styling active links | Fresh docs
Components | Fresh
Fresh 1.5: Partials, client side navigation and more
Fresh 1.1 - automatic JSX, plugins, DevTools, and more
Modifying the <head> | Fresh docs
Fresh 1.5: Partials, client side navigation and more - Deno
Introducing Fresh WordPress Themes
Parsing and Stringifying CSS | Deno Docs
Are you sure?
About css modules: https://github.com/denoland/fresh/issues/526
Since it's currently not on html or es spec, there doesn't to be an specific plan for it.
GitHub
Is css modules available? · Issue #526 · denoland/fresh
Hi! Im trying to port my nextjs app to fresh but when I import css module with import in islands I get an error. I know it must be preact's thing but I couldn't find anything. Am I missing ...
But you can just use any css library to do it?
You can use npm libraries now, so that's easier
Honestly you should really give Tailwind another chance. From what I read most people hate the idea of it, then use it and can’t live without it.
React/Preact is modelled around the “Separation of Concerns” model where “Component” is that separation area.
You already co-locate structure and behaviour in a component, excluding styles from this encapsulation is just going to lead to more long-term friction.
And Tailwind is one of the best solutions for co-locating styles right within structure.
on counterpoint, you'll take more time looking at docs than needed, mostly bc you'll need to relearn css and that's costy.
Also even if people say learning tw is easy, reading it (which is more important) is not that easy, mostly bc some of the elements have a lot of classes and if you're using something like daisyui, which "hides" the css, so you'll need to actually read a lot of docs, just to make a simple change
Also it's not 100% best solution, I've never seen a big site using it, they normally write custom css for it or their own solution (styleX)
Sometimes improving processes requires learning up front for a longer term payoff (see Typescript).
But Tailwind is very basic compared to something like Typescript (but no less valuable in Web). If you have a CSS background once you see the mapping patterns you’ll rarely need the docs. I reference them mainly to teach me CSS features (picking up the listed Native CSS as a side effect).
In my experience far more effort was wasted fixing issues and learning patterns & strategies to mitigate the maintenance nightmare that is CSS at scale (BEM etc).
JSX elements that have a lot of TW classes are trivially easy to understand and maintain, if not it’s a sign the component is doing too many things.
Large sites take a long time to pivot and Tailwind is relatively new (most Websites are still PHP!).
Just try it see if it clicks. It does for everyone I teach (experienced Web Dev or not).