2022-03-23
1982
#nextjs
Marie Starck
99501
Mar 23, 2022 â‹… 7 min read

The best styling options for Next.js

Marie Starck Marie Starck is a fullstack software developer. Her specialty is JavaScript frameworks. In a perfect world, she would work for chocolate. Find her on Twitter @MStarckJS.

Recent posts:

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 â‹… 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 â‹… 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 â‹… 10 min read
View all posts

6 Replies to "The best styling options for Next.js"

  1. I think you make a mistake in the cons to of css modules.

    Potential styling conflicts when used in large projects.

    Not really css are managed by JavaScript for give scope (always have a hash to prevent collision)

    No dynamic styling (e.g., based on a status like loading, error, success, etc.)
    This would be implemented with data-attributes.

    And another pro is that CSS Modules is more fast than another styles solutions.

    1. I… totally did. 🤦‍♀️ Thank you for bringing that to my attention. I will get that fixed.

      As for data-attributes, I couldn’t find a good and easy example. The best I could find was Sasha’s guide to write CSS components using data attributes (https://sacha.me/articles/css-data-components). Compared to Emotion where you can just pass in props and any conditional styling you want, using data-attributes sounds complicated.

      1. Nothing complicated about using data attributes. CSS (especially SCSS) modules are boss. Never understood the whole appeal of “single file components”. One tab for html/jsx another for css and you’re clean and in business. No need to get out of sync with the rest of the web and constantly change to a new hipper syntax each year. Have you thought of the headaches of opening up a tailwind or css-in-js site 5 years from now when whatever library du jour you used is long defunct and a security liability?

        “`css
        div[data-invalid] {
        color: red;
        }

        div:not([data-invalid]) {
        display: none;
        }
        “`

        “`javascript
        Name is a required field
        “`

    2. Hi Anthony,

      Thanks for reading this blog post and catching this error! We’ve updated the post with the corrected information.

Leave a Reply