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.
1 Reply
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