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:

Solving The Node.js Console.Time Is Not A Function Error

Solving the Node.js console.time is not a function error

Explore the two variants of the `console.time is not a function` error, their possible causes, and how to debug.

Joseph Mawa
Nov 1, 2024 â‹… 6 min read
Why jQuery 4 Is A Good Reminder To Stop Using jQuery

Why jQuery 4 is a good reminder to stop using jQuery

jQuery 4 proves that jQuery’s time is over for web developers. Here are some ways to avoid jQuery and decrease your web bundle size.

Shalitha Suranga
Oct 31, 2024 â‹… 11 min read
How to Create a Multilevel Dropdown Menu in React

How to create a dropdown menu in React

See how to implement a single and multilevel dropdown menu in your React project to make your nav bars more dynamic and user-friendly.

Ibadehin Mojeed
Oct 30, 2024 â‹… 12 min read
Purple background with different connections between icons for an article about building Node.js modules with Rust and NAPI-RS.

Building Node.js modules in Rust with NAPI-RS

NAPI-RS is a great module-building tool for image resizing, cryptography, and more. Learn how to use it with Rust and Node.js.

Rahul Padalkar
Oct 30, 2024 â‹… 7 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